应用场景

我们经常需要监听滚动条滚动或者鼠标的移动,但浏览器触发这类事件的频率非常高,可能在10几毫秒就触发一次,如果我们处理事件的函数需要操作大范围的DOM,这对于浏览器的性能是个考验,可能像chrome浏览器这样优秀的浏览器会好一点,但放到老版本的IE下,就可能发生卡顿现象。有的时候,我们只需要处理函数执行一次,比如文本输入验证,执行多次处理函数反而没有必要。

所以我们得想个办法,减少DOM操作的频度,也就是说稀释处理函数的执行频率,解决方法就是函数防抖和函数分流。函数防抖表示只执行一次处理函数,函数分流指降低处理函数的执行频率,下面是具体解释。

函数防抖

函数防抖指的是多次触发事件后,事件处理函数只执行一次,而且是在事件触发操作停止的时候。具体的思路就是延迟处理函数,如果设定的时间到来之前,又一次触发了事件,就清除上一次的定时器,具体代码实现如下。

var obj = document.getElementById('handle');/**
 * 事件触发的操作
 */function myFun() {    console.log('throttleV1');
}/**
 * 不封装的方法
 */obj.onmousemove = function () {
    clearTimeout(myFun.timer);
    myFun.timer = setTimeout(myFun,50);
}

这里有一个保存timer的技巧,如果不保存timer,那么执行完事件处理函数后,timer将被销毁,我们也就无法再清楚定时器了,所以需要保存这个变量,即使它所在的函数作用域对应的函数已经执行完了。这里用到的技巧是把timer设置为外部函数的属性,这样就不会被销毁了。
我们还可以对这个方法进行封装。

/**
 * 封装的方法之帮顶函数
 * @param method
 * @param delay
 * @param context
 */funct
        
		

网友评论