javascript - 使用 jquery 在后台添加事件

Question

我有一个包含 10,000 多个元素的 html ul 列表，我想添加自定义悬停工具提示事件并对每个事件进行一些其他处理。在 document.ready 上执行此操作需要 2-3 秒并卡住浏览器。我怎样才能异步执行此操作以使浏览器不会卡住？

我一直在阅读有关 setTimeout、jQuery queue 和 deferred 的内容，但也许我太笨了，无法理解所有内容。这家伙有有趣的东西http://erickrdch.com/2012/05/asynchronous-loop-with-jquery-deferred.html

这是我添加悬停的 each() 循环。

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

感谢您的帮助。

Answer 1

为什么要将它封装在一个循环中？尝试使用 .on() 将鼠标悬停在#biglist 上，然后委托(delegate)给每个li:

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

.each() 循环可能会对每个项目进行处理，从而造成严重破坏。作为旁注，如果您需要为 mouseenter 和 mouseleave 执行不同的功能，您需要使用 XML 格式(使用 .on() 方法与传统的 .hover() 方法略有不同):

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

无论哪种方式，这都会大大减少处理过程中的 CPU 消耗。