“节流函数”提高性能

时间:2022-04-25
本文章向大家介绍“节流函数”提高性能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

浏览器中DOM操作比起非DOM交互需要更多的内存和CUP时间,连续的DOM操作有可能会导致浏览器挂起,甚至崩溃。尤其IE中的onresize事件。 高频率的更改会让浏览器崩溃。为了绕开这个问题,需要使用定时器对此类处理函数进行节流

函数节流背后的基本思想:某些代码不可以在没有间隔的情况下连续重复执行

节流函数实现一般实现:1,定时器控制开关,2.定时清除定时器。

var throttle = {    switch:false,    timer:100,    process:function(method,context){        var self = this;        if(self.switch){            return;        }        self.switch = true;        setTimeout(function(){            self.switch = false;            method.call(context);        },self.timer);    }}
function throttle(method,context){    clearTimeout(method.flag);    method.flag = setTimeout(function(){        method.call(context);    },100);}

适用场景:scroll,resize事件还有输入联想词等高频事件。