使用jquery在後臺添加事件

我有一個包含10,000多個元素的html ul列表，並且希望添加自定義懸停工具提示事件並對每個元素執行一些其他處理。要在document.ready上做到這一點，需要2-3秒鐘並凍結瀏覽器。我如何異步執行此操作以便瀏覽器不凍結？使用jquery在後臺添加事件

我一直在閱讀關於setTimeout，jQuery隊列和延期，但也許我太密集，無法理解這一切。這個人有有趣的東西http://erickrdch.com/2012/05/asynchronous-loop-with-jquery-deferred.html

這是我添加懸停的each（）循環。

$('#biglist li').each(function(index) { 
    $(this).hover(function(e){ 
     ...do stuff... 
    }); 
});

感謝您的幫助。

來源

2013-02-14 bwaindwain

你爲什麼把它裝在一個循環中？儘量只採用懸停與.on()到#biglist，然後委託給每個李：

$('#biglist').on('hover','li', function(){ 
    // do crap 
});

的。每（）循環是通過在每個項目做處理可能造成嚴重破壞。請注意，如果您需要爲mouseenter和mouseleave執行不同的功能，則需要使用XML格式（使用.on（）方法與傳統的.hover（）方法略有不同）：

$('#biglist').on({ 
    mouseenter: function(){ 
     // do mouseenter crap 
    }, 
    mouseleave: function(){ 
     // do mouseleave crap 
    } 
},'li');

無論哪種方式，這應該大大減少處理的CPU消耗。

來源

2013-02-14 23:25:44 PlantTheIdea

感謝ü，我才意識到我忘了關行情 – PlantTheIdea 2013-02-14 23:28:15

太棒了！謝謝！我沒有意識到每個（）都有一個替代方案。也謝謝你，因爲你的提示我也加了一個鼠標移動器，所以給鼠標鼠標/ mouseleave一點點。現在它運行速度更快。 – bwaindwain 2013-02-15 16:51:42

瀏覽器的JavaScript不支持真正的併發性（除了尖端的HTML5功能，這是），所以你不能讓一個進程在後臺運行，而頁面繼續正常工作。

你可以做AFAIK是降低你的處理代碼轉換成塊儘可能小，然後用setTimeout或setInterval執行它們，使用延遲低值（但最好不爲零的最好，所以頁面的其餘部分將不會凍結）。

撇開事實，你並不需要一個不同的hover處理器的每個元素，正如其他人所指出的，如果你需要做的接收數據的重處理（並且這樣的處理不能由服務器來完成）一個方法是使用隊列：

var queue = []; 
setInterval(function() { 
    var next = queue.shift(); 
    if (next) next(); 
},50); 

... 

$.each(lotsOfData, function(index, value) { 
    queue.push(function() { 
     // Code for processing the value 
    }); 
});

來源

2013-02-14 23:25:46 mgibsonbr

你應該使用.on()其綁定到#bigList，而不是在10,000元素：

$('#bigList').on('hover', 'li', function(e) { 
    // ... 
});

來源

2013-02-14 23:26:04

綁定到文檔不是好消息......他有一個ID，綁定到id，並指定li是更快的處理。 – PlantTheIdea 2013-02-14 23:27:13

誰投了票？ – 2013-02-14 23:44:31

使用jquery在後臺添加事件

回答

相關問題