javascript - setTimeOut 如何与调整大小事件监听器配合使用？

Question

来自 Mozilla site关于resize，我不明白下面的示例如何在setTimeout函数中将resizeTimeout设置为null 。这样做有什么目的？通过声明 var resizeTimeout; 然后将其设置为 null，(!resizeTimeout) 的条件将为 true，那么有什么区别make 将其设置为 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
    ...
  }

}());

Answer 1

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

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

由于 resizeTimeout 在超时函数内设置为 null，因此表达式 !resizeTimeout 最多每 66 毫秒才为 true。一旦这 66 毫秒结束，您就可以设置另一毫秒。