javascript - setTimeOut如何与调整大小的事件监听器一起使用？

从resize上的Mozilla site，我不理解下面的示例，说明如何在resizeTimeout函数中将null制成setTimeout。这有什么目的？通过同时声明两个var resizeTimeout;并将其设置为null，(!resizeTimeout)的条件将为true，那么将其设置为null有什么区别？

(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

       // The actualResizeHandler will execute at a rate of 15fps
       }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    ...
  }

}());

最佳答案

正如函数名称所暗示的，这是一种称为“节流”的通用技术。这使得调整大小处理程序最多仅每66毫秒被调用一次。

如果用户正在调整窗口大小，它将继续触发该事件并不断触发resizeThrottler函数。但是，如果每次触发调整大小事件时都执行了ActualResizeHandler，则页面将陷入困境。

由于在超时功能内将resizeTimeout设置为null，因此表达式!resizeTimeout最多仅每66毫秒为true。一旦这66毫秒结束，您可以设置另一个。

关于javascript - setTimeOut如何与调整大小的事件监听器一起使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46869125/