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的新手，所以我很抱歉，如果问题似乎太明显了。任何指针赞赏。 THX！

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再次更新，没有恼人的上一个错误。正如您所看到的，所有这一切都是在事件监听器被解雇后立即取消绑定。

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

1 个答案: