前端优化之JavaScript篇（持续更新）

事件节流（throttle）、防抖（debounce）

事件节流（throttle）

当页面监听滚动条触发回调函数时，如果不加以限制，在短时间内会触发很多次回调函数。非常影响页面性能。解决办法思路为，一段时间内只触发一次回调函数，事件节流则是在规定时间执行第一次的回调函数。

// 在delay时间内，只能触发一次函数。
  throttle(callback, delay) {
	  let lastTime,
	      timer = null;
	  // 返回的函数，经典闭包实现，内部依赖lastTime，timer变量
	  return function() {
	    let args = arguments,
	      nowTime = +new Date();
	    if(lastTime && nowTime - lastTime < delay) {
	      if(timer) {
	        clearTimeout(timer);
	      }
	      timer = setTimeout(() => {
	        callback.apply(this, args);
	        lastTime = nowTime;
	      }, delay);
	    } else {
	      // 如果这个单位时间内触发多次函数，只有这里生效一次，并重置lastTime
	      callback.apply(this, args);
	      lastTime = nowTime;
	    }
	  }
	}

// throttleFunc函数执行上下文，引用throttle作用域，throttle作用域不会被销毁
const throttleFunc = throttle(() => console.log('2s触发'), 2000);

document.addEventListener('scroll', throttleFunc);

防抖（debounce）

在vue中监听search参数变化，实现自动搜索的时候。实现原理则是每一次改变数据，都会去设置一个setTimeout，并且再次之前清除上一个setTimeout。这样一来，在delay时间内去改变search则会把上一次的setTimeout清除，则不会执行。在delay时间内数据未发生变化，则执行回调去搜索。

debounce(callback, delay) {
  let timer = null;
   return function(args) {
     if(timer) {
       clearTimeout(timer);
     }
     timer = setTimeout(() => {
       callback.apply(this, arguments);
     }, delay);
   }
 }

Mixin实现自动保存搜索状态中添加防抖

created(){
   this.throttleFunc = this.$utils.debounce(() => {
       this.setRouterQuery();
       this.findBySearch();
   }, 500);
},
watch: {
  'search': {
      handler(){
          this.throttleFunc();
      },
      deep: true
  }
}