函数节流

DOM 操作比起非DOM 交互需要更多的内存和CPU 时间,高频率的操作可能是游览器崩溃。这时候可以借用定时器对该函数进行节流。

函数节流背后的基本思想是指,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

  • 这个模式可以使用throttle()函数来简化,这个函数可以自动进行定时器的设置和清除,如下例
    所示:
    function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId= setTimeout(function(){
    method.call(context);
    }, 100);
    }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容