推遲功能，如果它已經在statechange上運行 - js

Question

我覺得答案是在那裏，但我不知道要查找什麼。我查看了defer和promise，但我不知道如何應用，如果我希望它適用於自己。

如果update_content()正在運行，我不希望在第一次完成之前再次調用它。你可以看到我的可怕的僞代碼，如果它已經在運行，我希望它等待運行update_content（）。一旦完成，它會再次運行。從fadeIn/Outs等完成需要1-3秒，並且我希望每個statechange都等待，直到前一個請求完成。順便說一下，沒有AJAX。我希望它在這個意義上是同步的。

如何延遲功能運行直至完成運行？

這裏是update_content()代碼：

// this function updates page content with ajax and cool effects! 
function update_content(data) { 
    if(data == null) return; 

var id = $(data).prop('id'), 
    content = "#" + id, 
    header = 0; 

    // if the header is full, header = 0. if it's tiny, header = 1 
    if($('#navbar.affix').length) { header = 1; } 

    // if the page that needs to be loaded is NOT on the page 
    // this could be #main, #content, etc 
    if(!$(content).length) { 
     $(data).hide().appendTo('#main_wrapper');  
    } 

    // show the homepage $('#main') 
    // fades the content viewer out. no positioning is done on the homepage. 
    if(id == "main") { 

     if(header == 1) { $('body, html').scrollTop(55); } else { window.scrollTo(0,0); } 

     $('#main').siblings(':visible').center(header); // puts visible content on TOP of page 

     $('#main')// /.center(header) 
      .show(); // home page goes behind content 
     $('#main').siblings().fadeOut(600, function() { // fadeout content overlay, and ON COMPLETE 
       $(this).hide(); // hide that shit    
      }); 
     if(header == 1) { $('body, html').scrollTop(55); } else { window.scrollTo(0,0); } 

     return; 

} 

    // show the content viewer $('#content') 
    // fades content viewer in 
    if(id = "content") { 

     $('#content') 
      .center(header) // place on top and center 
      .fadeIn(function() { // fade in, and ON COMPLETE 
       $('#main').hide(); // quickly remove siblings - DO NOT USE FADE 
       $(this).uncenter(); // places it static so it is normal 

       if(header == 1) { $('body, html').scrollTop(55); } else { window.scrollTo(0,0); } 
     }); 

     return; 
    } 

} 

Answer 1

首先，你需要的時候update_content()做就知道了。對於您可以使用您的兩個動畫一些承諾並返回時任何動畫在此功能啓動完成（這可能，如果沒有動畫開始立即解決）的是解決一個承諾：

// this function updates page content with ajax and cool effects! 
// it returns a promise that is resolved when any animations started in this 
// function are done 
var updateRunning = 0; 
function update_content(data) { 
    if(data == null) [ 
     // return an already resolved promise 
     return $().promise(); 
    } 

    ++updateRunning; 

    var id = $(data).prop('id'), 
    content = "#" + id, 
    header = 0, p1, p2; 

    // if the header is full, header = 0. if it's tiny, header = 1 
    if($('#navbar.affix').length) { header = 1; } 

    // if the page that needs to be loaded is NOT on the page 
    // this could be #main, #content, etc 
    if(!$(content).length) { 
     $(data).hide().appendTo('#main_wrapper');  
    } 

    // show the homepage $('#main') 
    // fades the content viewer out. no positioning is done on the homepage. 
    if(id == "main") { 

     if(header == 1) { $('body, html').scrollTop(55); } else { window.scrollTo(0,0); } 

     $('#main').siblings(':visible').center(header); // puts visible content on TOP of page 

     $('#main')// /.center(header) 
      .show(); // home page goes behind content 
     p1 = $('#main').siblings().fadeOut(600, function() { // fadeout content overlay, and ON COMPLETE 
       $(this).hide(); // hide that shit    
      }).promise(); 
     if(header == 1) { $('body, html').scrollTop(55); } else { window.scrollTo(0,0); } 


    } else { 

     // show the content viewer $('#content') 
     // fades content viewer in 
     if(id == "content") { 

      p2 = $('#content') 
       .center(header) // place on top and center 
       .fadeIn(function() { // fade in, and ON COMPLETE 
        $('#main').hide(); // quickly remove siblings - DO NOT USE FADE 
        $(this).uncenter(); // places it static so it is normal 

        if(header == 1) { 
         $('body, html').scrollTop(55); 
        } else { 
         window.scrollTo(0,0); 
        } 
      }).promise(); 

    } 
    // note that either p1, p2 or both might be undefined here, but 
    // $.when() should still work for us 
    return $.when(p1, p2).always(function() { 
     --updateRunning; 
    }); 
} 

僅供參考，我也將if (id = "content")更改爲if (id == "content")，因爲我認爲您的編碼錯誤。

然後，爲update_content()創建一個隊列和包裝器，而不是update_content，這個包裝器的想法是隻要update_content()完成，它就會處理下一個排隊的項目。你可以通過維護一個標誌來判斷update_content()是否在運行。

var queue = []; 
function update_content_wrapper(data) { 
    if (updateRunning !== 0) { 
     // just queue the data if update already running 
     queue.push(data); 
    } else { 
     update_content(data).always(function() { 
      // if items in the queue, get the oldest one 
      if (queue.length) { 
       update_content_wrapper(queue.shift()); 
      } 
     }); 
    } 
} 

然後，你可以叫上你的stateChange事件包裝函數，它會做所有的髒活你：

History.Adapter.bind(window, 'statechange', function() { 
    var event_state = History.getState(); 
    update_content_wrapper(event_state.data.html); 
}); 

在別的地方你打電話update_content()，你應該把它切換到呼籲update_content_wrapper()。