函数崩溃，因为太多迭代jQuery

Function crashing because of so many iterations jQuery

本文关键字：迭代 jQuery 太多 因为 崩溃 函数      更新时间：2023-09-26

我有一个大约 300 div的页面，我切换他们的 css，使它们要么 100% 宽，要么说 200 像素。当只有 10 个左右的div 时，我的函数可以正常工作，但现在有这么多，我的函数似乎崩溃了。

谁能解释为什么会发生这种情况或"增强"我当前的功能？

$('.grid').click(function () {
            $('.vacancy').animate({ opacity: 0 }, 500, function () {
                $(".vacancy").switchClass("listview", "gridview", 100);
                $(".vacancy").stop().animate({ opacity: 1 }, 500);
                $('a.gridView').removeClass('grid-active');
                $('a.listView').addClass('list-active');
            });
            return false;
});
$('.list').click(function () {
            $('.vacancy').animate({ opacity: 0 }, 500, function () {
                $(".vacancy").switchClass("gridview", "listview", 100);
                $(".vacancy").stop().animate({ opacity: 1 }, 500);
                $('a.gridView').removeClass('grid-active');
                $('a.listView').addClass('list-active');
            });
            return false;
});

回调函数为每个动画元素触发。

如果您有 300 个.vacancydiv，回调将执行 300 次。每次执行回调时，都会为 300 个元素调用 $(".vacancy").switchClass()。300 x 300 是...好多。

您可以从在回调中使用this开始：

$('.grid').click(function () {
        $('.vacancy').animate({ opacity: 0 }, 500, function () {
            $(this).switchClass("listview", "gridview", 100);
            $(this).stop().animate({ opacity: 1 }, 500);
            $('a.gridView').removeClass('grid-active');
            $('a.listView').addClass('list-active');
        });
        return false;
});

您需要一些其他方法来减少调用其他两行的次数，但是如果没有html，我无法说出解决方案是什么。

这是一个演示的小提琴：http://jsfiddle.net/jkcY3/

$.fn.logMe = function() {
    return this.each(function() {
        console.log('logMe called', this); 
    });
};
$('.vacancy').animate({ opacity: 0 }, 500, function() {
   $('.vacancy').logMe();
});

如果我有 300 个div，我会接到 90000 个电话给logMe();

相关文章：