码迷,mamicode.com
首页 > 其他好文 > 详细

函数的节流

时间:2020-06-20 00:49:42      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:OLE   时间间隔   表示   原因   ttl   call()   context   处理程序   另一个   

函数的节流

函数节流的原因

DOM操作操作比非DOM操作需要更多的内存和CPU时间
比如 onresize事件处理程序DOM操作,高频率会让浏览器崩溃,解决这个问题可以用定时器对该函数进行节流 

 函数节流基本思想

 每隔一段时间执行, 比如第一次调用函数,创建一个定时器,在指定时间隔执行代码,第二次调用函数。会清除前一次的定时器并设置另一个

let processor = {
    timeoutId: null,
    performProcessing: function (){
        console.log(‘实际执行代码‘)
    },
    process: function(){
        clearTimeout(this.timeoutId);
        let that = this   // setTimeout 函数环境总是window,所以保存this的引用以方便以后使用
        this.timeoutId = setTimeout(function(){
        that.performProcessing()
        }, 100)
    }

}
processor.process()
 

在这段代码创建叫做processor对象,这个对象还有两个方法: process()和 performProcessing()
 前者初始化任何处理必须调用的,后者则实际进行应完成的处理。当调用process(),第一步是阻止之前的调用被执行
然后创建一个新的定时器调用performProcessing()。时间间隔100ms,这表示最后调用process()之后至少100MS才会调用performProcessing()

 function throttle(method, context){
    clearTimeout(method.tId)
    method.tId = setTimeout(function(){
        method.call(context);
    }, 100)
   }

throttle函数接受两个参数: 要执行的函数以及在在哪个作用域执行
上面这个函数首先清除之前的设置的任何定时器。定时器ID是存储在函数tId属性中的第一次把方法传给throttle(),的时候这个方法
可能不存在。接下来创建一个新的定时器,并将其ID储存在方法的tId属性中,定时器代码使用call()
来确保方法在适当的环境中执行。 如果没有给出第二个参数,那么就在全局作用中内执行该方法

待更新

 

函数的节流

标签:OLE   时间间隔   表示   原因   ttl   call()   context   处理程序   另一个   

原文地址:https://www.cnblogs.com/pikachuworld/p/13166882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!