应用场景
我们经常需要监听滚动条滚动或者鼠标的移动，但浏览器触发这类事件的频率非常高，可能在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
延伸阅读
- ssh框架
2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁
2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】
2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词
2017-07-26
- 从栈不平衡问题 理解 calling convention
2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明
2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解
2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析
2017-07-26
- 集合结合数据结构来看看(二)
2017-07-26
学习是年轻人改变自己的最好方式