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执行顺序

回答

相关问题