为什么函数只运行一次？使用计数器函数试图运行函数多次，之前调用完成后，使用计数器函数

Question

我目前正在研究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仍然很陌生，所以我的道歉，如果问题似乎太明显了。任何指针赞赏。谢谢！

Answer 1

事情是所有的页面轮流被解雇，但一次。您必须等到每个转换完成后才能开始下一个转换。

在您的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。正如你所看到的，它只需要在事件侦听器解除绑定后立即解除绑定。