javascript - 为什么函数只运行一次？在上一次调用完成后，尝试使用计数器函数多次运行函数

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再次更新，没有烦人的最后一个错误。正如您所看到的，所要做的就是在事件监听器被触发后立即解除绑定(bind)。