为什么函数只运行一次?使用计数器函数试图运行函数多次,之前调用完成后,使用计数器函数
我目前正在研究jQuery(无插件)中的翻页效果。到目前为止,只要您逐个点击页面,翻页效果就可以正常工作。但现在我想包括一个下拉选择(即选择元素),以便用户可以直接跳转到所选内容。我尝试使用循环和.each()方法进行此项工作,以便重复调用turnRightPage/turnLeftPage函数,直到显示具有所选内容的页面。但经过相当多的试验和错误以及大量研究之后,我认为对于我的turnRightPage/turnLeftPage()函数(它们是转换各个页面的转换函数),循环迭代速度太快,因为循环完成,在功能完成之前。我想,我需要做的是找到一种方法来暂停循环,直到函数完成执行,然后继续下一次迭代。我认为最有前途的方法会使用的功能与迭代计数器,就像是这里建议: Javascript: wait for function in loop to finish executing before next iteration(感谢在这一点上jfriend00)我也看过 Invoking a jQuery function after .each() has completed和 wait for each jQuery 等等,其中类似的解决方案被提出。为什么函数只运行一次?使用计数器函数试图运行函数多次,之前调用完成后,使用计数器函数
下面是我试图实现jfriend00的回调。我添加了一个return语句,以在页面翻页次数完成后突破“回调循环”。
//determine whether to flip pages forward or back - first forward
if(currentPagePos < foundPagePos){ // => turn right page
//determine how many times need to turn page
if (pageDifference > 1 && pageDifference % 2 !=0) {
var numPageTurns = (pageDifference-1)/2;
pageForward (numPageTurns);
} //else if ... rest omitted for brevity
}
function pageForward (numPageTurns){
var i = 0;
function next(){
i++;
if (i <= numPageTurns){
turnRightPage();
} else {
return;
}
}
next();
};
完整的代码可以在这里看到:http://jsfiddle.net/snshjyxr/1/
它翻开新的一页,但只有一次!我错过了什么?
我对javascript/jQuery仍然很陌生,所以我的道歉,如果问题似乎太明显了。任何指针赞赏。谢谢!
事情是所有的页面轮流被解雇,但一次。您必须等到每个转换完成后才能开始下一个转换。
在您的turnRightPage
和turnLeftPage
函数中使用回调函数。举例turnRightPage
:
function turnRightPage(callback) {
[...]
//change class AFTER transition (frm. treehouse-site)
$page.on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
//need to double-set z-index or else secondtime turning page open setting z-index does not work (tried in Chrome 38.0.2125.111 m)
$page.css("z-index", turnedZindex + 1);
$(".turned").removeClass("turned");
$page.addClass("turned");
if(typeof callback == "function") {
callback();
}
});
};
而在你pageForward
功能,使用turnRightPage
递归:
function pageForward(numPageTurns) {
console.log("number of FORWARD page turns: " + numPageTurns);
if(numPageTurns > 0) {
turnRightPage(function(){
pageForward(numPageTurns - 1);
});
}
};
这里是你的更新jsfiddle。正如您所看到的,当您进行多次页面更改时存在一个剩余的错误,这是由于您每次转换页面时都在转换结束时添加侦听器,并且从不删除它们。所以他们每次都在执行。
编辑:jsfiddle再次更新没有恼人的最后一个bug。正如你所看到的,它只需要在事件侦听器解除绑定后立即解除绑定。
太棒了!非常感谢你,安托万。尽管我不得不承认,但我仍然在努力理解这里的回调函数是如何工作的。什么是 if(typeof callback ==“function”){callback.call();位在这里做? – marcor 2014-11-05 13:08:47
'if'部分只是检查变量'callback'是否确实是一个函数,所以我们不会尝试调用一个公共变量(这只会引发错误)。 'callback.call()'只是调用'callback'变量中包含的函数。现在我想到了这一点,'callback()'可以做到这一点。我会编辑我的答案。 – 2014-11-05 15:23:57
请记住,当你想传递一个特定的上下文给你调用的函数时,'.call()'方法可以得心应手(例如,如果你想/需要'这个' ) – 2014-11-05 15:27:13