函数的节流

Posted pikachuworld

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了函数的节流相关的知识,希望对你有一定的参考价值。

函数的节流

函数节流的原因

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()
来确保方法在适当的环境中执行。 如果没有给出第二个参数,那么就在全局作用中内执行该方法

待更新

 

以上是关于函数的节流的主要内容,如果未能解决你的问题,请参考以下文章

函数节流

函数防抖和节流*(性能优化不错的选择)

函数的节流

JavaScript性能优化8——防抖与节流

JavaScript性能优化8——防抖与节流

js函数节流