Question

我有一个相当性能密集的调整大小功能，我无法正常运行，因为它会混乱浏览器。我决定让函数每隔500毫秒运行一次，如下所示：

var resizeRunning = 0;
window.addEventListener('resize', function() {
    if (resizeRunning == 0) {
        resizeRunning = 1;
        $(".freebies_tile").each(function() {
            $(this).waypoint(function() {
                var el = this;
                $(el).removeClass('not_loaded');
                setTimeout(function() {
                    $(el).removeClass('not_active');
                }, 500);
            }, { offset: '100%', context: '.content_div', triggerOnce: true  });
        }); 
        setTimeout(function() {
            resizeRunning = 0;
        }, 500);
    }
}, true);

这有效，但我想知道是否有更短的\更快的方法来实现相同的结果。

Answer 1

如果您希望调整大小逻辑的方式不会超过每500毫秒，并且您不希望错过任何调整大小处理，那么您可以执行类似的操作。

这比你自己有一个优势，如果你自上次处理它以来500ms内有一个resize事件，但是没有更多，这仍然会处理resize事件。您的代码将错过最后一次调整大小的事件，因为它们在最后一个之后太快，您将无法处理最终大小。

// closure to store state variables without making globals
(function() {
    var lastResizeProcessTime = 0;
    var resizeTimer;
    // don't call this more often than every 500ms
    var minResizeTime = 500;
    window.addEventListener('resize', function() {
        var delta = new Date().getTime() - lastResizeProcessTime;
        // if it's been a while since last resize, just do it now
        if (delta >= minResizeTime) {
            processResize();
        } else {
            // if resize not already scheduled, schedule one for 
            // minResizeTime from the last one
            if (!resizeTimer) {
                resizeTimer = setTimeout(processResize, minResizeTime - delta);
            }
        }        
    }, true);

    function processResize() {
        lastResizeProcessTime = new Date().getTime();
        clearTimeout(resizeTimer);
        resizeTimer = null;
        $(".freebies_tile").each(function() {
            $(this).waypoint(function() {
                var el = this;
                $(el).removeClass('not_loaded');
                setTimeout(function() {
                    $(el).removeClass('not_active');
                }, minResizeTime);
            }, { offset: '100%', context: '.content_div', triggerOnce: true  });
        }); 
    }
})();

工作演示：http://jsfiddle.net/jfriend00/v4xm6Lar/

每次处理调整大小时，是否应该或不应该执行尽可能多的DOM遍历是一个单独的问题。我们需要更多地了解您的应用程序的上下文以及调整大小操作之间可能发生的变化，以了解您是否应该或可以将一些DOM信息从一个调用缓存到下一个调用。

Jquery：每x秒运行一次函数

1 个答案: