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

Why does function only run once?Trying to run function multiple times,after previous invokation complete, using an counter function

本文关键字：函数 运行 计数器 上一次 一次 为什么 调用      更新时间：2023-09-26

我目前正在jQuery中编写一本具有翻页效果的书（没有插件）。到目前为止，只要你一页一页地点击页面，翻页效果就很好。但现在我想包括一个下拉选择（即选择元素），这样用户就可以直接跳转到所选内容。我试着用循环和.each（）方法来实现这一点，这样就可以反复调用turnRightPage/turnLeftPage函数，直到显示出包含所选内容的页面。但是，经过大量的尝试和研究，我认为循环对于我的turnRightPage/turnLeftPage（）函数（它们是转换相应页面的转换函数）来说迭代太快了，因为循环在函数完成之前就完成了。我认为，我需要做的是找到一种方法来暂停循环，直到函数完成执行，然后继续下一次迭代。我认为最有前途的方法是使用带有迭代计数器的函数，就像这里建议的那样：Javascript：等待循环中的函数在下一次迭代之前完成执行（感谢jfriend00）我也读过在.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还很陌生，所以如果问题看起来太明显，我很抱歉。感谢任何指点。Thx！

问题是所有的翻页都被触发，但都是同时触发的。您必须等到每个转换完成后才能开始下一个转换。

在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再次更新，没有出现令人讨厌的上一个错误。正如您所看到的，所需要的只是在事件侦听器被触发后立即解除绑定。

相关文章：