Javascript Jquery:仅每x秒运行一次函数

我有一个相当高性能的调整大小功能，我不能正常运行，因为它会扰乱浏览器。我决定让函数每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);

---

这是可行的，但我想知道是否有一种更短\更快的方法可以达到相同的结果。

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

与您的相比，这有一个优势，即如果自上次处理调整大小事件后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  });
        }); 
    }
})();

工作演示：

---

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

setTimeout是最好的解决方案。这很好。setTimeout是正确的选项，但为什么要为每个tile对象设置超时？你在寻找一种渐进的隐藏效果吗？如果将$.freebies_磁贴保存在eventHandler之外的变量中，可以提高性能。我支持这个想法。当你有很多元素时，每次迭代都会扫描DOM。仅供参考，当你有工作代码并且想要改进它的方法时，在上有一个专门针对这种情况的论坛。哇，谢谢你有深刻的答案。您完全正确地指出，我的代码将错过在函数处于冷却状态时发生的调整大小事件。我仍然不确定我将使用我的代码还是你的代码，因为这对于我试图实现的目标来说似乎有点过分，但这绝对是正确的答案。