防抖与节流

1.概念

防抖：防抖：事件只在触发的N秒内，如果没有再次触发，则N秒后触发函数，如果又触发，则重新计时
节流：事件在一定时间间隔内只执行一次，会先执行，单位时间内你如果在点击则不会执行，等计时结束再点击才有用
两者异同点：都是为了解决高频操作。（立即执行和非立即执行）
防抖是只执行最后一次操作，而且是延时执行，等最后一次操作完成然后延时执行。
节流：事件在一定时间间隔内只执行一次，会先执行。单位时间内你如果在点击则不会执行，等计时结束再点击才有用

防抖：

let timeout = null;
/**
* 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
* 
* @param {Function} func 要执行的回调函数 
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行 
* @return null
*/
function debounce(func, wait = 500, immediate = false) {
   // 清除定时器
   if (timeout !== null) clearTimeout(timeout);
   // 立即执行，此类情况一般用不到
   if (immediate) {
   	var callNow = !timeout;
   	timeout = setTimeout(function() {
   		timeout = null;
   	}, wait);
   	if (callNow) typeof func === 'function' && func();
   } else {
   	// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
   	timeout = setTimeout(function() {
   		typeof func === 'function' && func();
   	}, wait);
   }
}

export default debounce

节流：

let timer, flag;
/**
 * 节流原理：在一定时间内，只能触发一次
 * 
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
function throttle(func, wait = 500, immediate = true) {
	if (immediate) {
		if (!flag) {
			flag = true;
			// 如果是立即执行，则在wait毫秒内开始时执行
			typeof func === 'function' && func();
			timer = setTimeout(() => {
				flag = false;
			}, wait);
		}
	} else {
		if (!flag) {
			flag = true
			// 如果是非立即执行，则在wait毫秒内的结束处执行
			timer = setTimeout(() => {
				flag = false
				typeof func === 'function' && func();
			}, wait);
		}
		
	}
};
export default throttle

最后js引用一下封装js:

// 防抖方法
import debounce from './libs/function/debounce.js'
// 节流方法
import throttle from './libs/function/throttle.js'

使用:
  created(){
  // changeTabs是上面切换tab的事件，切换太快可能导致页面渲染数据跟不上
    this.changeTabs = debounce(this.handle, 3000,false)
    // this.changeTabs = throttle(this.handle, 300,false)
  },
  methods: {
      handle(e) {
          console.log('执行自己的方法')
      }
  }