js函数节流（Throttle）

在浏览器 DOM 事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小（resize），浏览器页面滚动（scroll），鼠标移动（mousemove），输入框监听（oninput）等。

也就是说用户在触发这些浏览器操作的时候，如果脚本里面绑定了对应的事件处理方法，这个方法就不停的触发。而当事件处理比较复杂的时候浏览器不断执行计算，从而导致浏览器性能降低甚至卡死，影响用户体验。

下面我们就针对这一情况做函数的节流处理

1.利用闭包进行改进

onSearch(e) {
　　this.throttle(this.queryData, 800);
},
/** 
 * 函数的节流处理
 * @param fn  节流后处理的方法
 * @param delay  操作时间1000=1s
 */
throttle(fn, delay) {
　　var timer = null;
　　return function(){
　　　　clearTimeout(timer);
　　　　timer = setTimeout(() => {
　　　　　　fn();
　　　　}, delay);
　　}
},
queryData(e) {
　　console.log('1111111')
},

2.利用函数的私有变量保存tId

onSearch(e) {
　　this.throttle(this.queryData, null, 800, e.detail);
},
/** 
 * 函数的节流处理
 * @param fn  节流后处理的方法
 * @param context  保存this指向，可以传null
 * @param delay  操作时间1000=1s
 */
throttle(fn, context, delay, text) {
　　clearTimeout(fn.tId);
　　fn.tId = setTimeout(() => {
　　　　fn.call(context, text);
　　}, delay);
},
queryData(e) {
　　console.log('1111111')
},

注意：普通页面和组件间可能存在this指向问题，所以需要传context参数