Jquery:每隔x秒运行一次函数

Jquery: run function only every x seconds

本文关键字：一次 函数 运行 每隔 Jquery      更新时间：2023-09-26

我有一个相当性能密集型的调整大小函数，我不能正常运行，因为它会使浏览器混乱。我决定让函数每500ms运行不超过一次，如下所示:

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);

这工作，但我想知道是否有一个更短'更快的方法来实现相同的结果。

如果您希望调整大小逻辑的运行频率不超过每500ms，并且您不想错过任何调整大小的处理，您可以这样做。

这比你的有一个优点，如果一个调整大小事件在你最后一次处理后的500毫秒内出现，但是没有更多，这仍然会处理该调整大小事件。您的代码将错过上次的大小调整事件，因为它们在上次事件之后太短，您将永远不会处理最终大小。

// 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信息，从一个调用到下一个。

相关文章：