爲什麼函數只運行一次？使用計數器函數試圖運行函數多次，之前調用完成後，使用計數器函數

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。正如你所看到的，它只需要在事件偵聽器解除綁定後立即解除綁定。