函数的节流

Posted 2020-12-11 pikachuworld

函数的节流

函数节流的原因

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

待更新