jQuery/JavaScript執行順序

我有一些項目，我希望用戶能夠使用jQuery進行過濾。用戶選擇他們的過濾標準並點擊提交，然後我打電話給我的數據庫。當這個調用完成，我淡出了現有的容器具有此功能：jQuery/JavaScript執行順序

function clearGrid() { 
    var theseDivs = $('.grid-item'); 
    $('.grid-item').fadeOut('fast', function() { 
    $(theseDivs).remove();  
    }); 
}

，然後我附上我的新數據具有以下功能：

function repopulate() { 
    <% @stuff.each do |gb| %> 
    $('#grid').append('<%= escape_javascript(render "/stuff", :gb => gb) %>'); 
    <% end %> 
    resizeGrid(); 
}

的resizeGrid（）函數做一些絕對定位基於網格中的其他元素。看起來像repopulate（）被調用之前，其他元素與clearGrid（）一起被移除，因此新元素的位置關閉，並且它們呈現爲舊元素仍然存在。

有沒有一種方法可以確保我的repopulate（）函數不會被調用，直到其他元素完好無損爲止？

來源

2012-03-30 opticon

'repopulate'在哪裏叫？該代碼似乎不在這裏。另外，'theseDivs'已經是一個jquery對象，不要再次調用'$'。 – 2012-03-30 17:31:09

爲什麼不在'clearGrid'的末尾調用'repopulate'？ – Hoagie 2012-03-30 17:46:51

您應該允許一旦它完成了clearGrid()函數來調用回調，然後將它傳遞repopulate作爲回調。更改clearGrid()看起來像這樣：

function clearGrid(callback) { 
    var theseDivs = $('.grid-item'); 
    theseDivs.fadeOut('fast', function() { 
     theseDivs.remove(); 
     if(callback) { 
      callback(); 
     } 
    }); 
}

然後，假設您目前的代碼來調用這兩個看起來像這樣：

clearGrid(); 
repopulate();

你可以改變它看起來像這樣：

clearGrid(repopulate);

注意：repopulate之後它不應該有()因爲你想傳遞給它的引用，而不是調用它。

第二個注意：我還將clearGrid()更改爲僅使用theseDivs，而不是再次調用jQuery。這種方式稍微快一點，但您可能無法注意到這種差異。

如果您知道將只有<div>標籤與您一起工作，您可以將選擇器更改爲$('div.grid-item')以進行另一次小加速。

來源

2012-03-30 18:55:36

儘量放慢重新填充法

setTimeout(function(){ repopulate(); }, 50);

來源

2012-03-30 17:42:44

jQuery/JavaScript執行順序

回答

相關問題