setTimeOut如何与resize事件侦听器一起使用？

从resize上的Mozilla site，我不明白如何resizeTimeout是nullsetTimeout功能内的下面的示例。这有什么用途？通过声明var resizeTimeout;然后将其设置为null，条件(!resizeTimeout)将为真，那么将其设置为null有什么区别？setTimeOut如何与resize事件侦听器一起使用？

(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 
    ... 
    } 

}());

来源

2017-10-21 mangocaptain

效果是'resizeTimeout'开头为空，在第一次调整大小事件后，它得到一个值并启动一个计时器，并且当它具有该值时，将忽略任何未来的调整大小事件。然后当定时器完成时，调用'actual'处理程序并且'resizeTimeout'返回null，所以下一个resize事件将再次启动定时器。 –

这是一种常用的称为“节流”的技巧，正如函数名所示。这使得resize处理程序最多只能在每66毫秒调用一次。

如果用户调整窗口大小，它将继续触发该事件并不断触发resizeThrottler函数。但是，如果每次触发resize事件时都执行actualResizeHandler，则页面将陷入停滞状态。

由于resizeTimeout在超时函数中设置为null，因此表达式!resizeTimeout最多只能在每66毫秒内为真。一旦这66毫秒结束，你可以设置另一个。

来源

2017-10-21 23:42:34 webdevdani

setTimeOut如何与resize事件侦听器一起使用？

回答

相关问题