防抖函数 和 节流函数

防抖函数

防抖函数的应用场景：
输入框中频繁输入内容，搜索或者提交信息；
频繁的点击按钮，触发某个事件；
监听浏览器滚动事件，完成某些特定操作；
用户缩放浏览器的resize事件；
防抖函数代码如下

function debounce(fn, delay, immediate = false) {
// 1.定义一个定时器,保存上一次的定时器
let timer = null
let isInvoke = false
// 2.真正执行的函数
const _debounce = function(...args) {
	if (timer) clearTimeout(timer)
	if (immediate && !isInvoke) {
		fn.apply(this, args)
		isInvoke = true
	} else {
	// 延迟执行
	timer = setTimeout(() => {
	// 外部传入的真正要执行的函数
		fn.apply(this, args)
		isInvoke = false
		}, delay)
	}
}
// 取消功能
 _debounce.cancel = functio
	  if(timer) clearTimeout(timer)
	  timer = null
	  isInvoke = false
	}
	return _debounce
}

使用 debounce(函数,时间,true为立即执行函数不传为false)

节流函数

节流函数的应用场景 固定的频率会触发
监听页面的滚动事件；
鼠标移动事件；
用户频繁点击按钮操作；
游戏中的一些设计；
节流函数代码如下

 function throttle (fn, interval, option = { leading: true, trailing: false}) {
 	const {leading, trailing} = option
 	// 1.记录上一次的开始时间
 	  let lastTime = 0
 	  let timer = null
 	 // 2.事件触发时,真正执行的函数
      const _throttle = function (...args) {
      // 获取当前事件触发时的时间
        let nowTime = new Date().getTime()
        if(lastTime === 0 &&  leading === false) {
			 lastTime = nowTime
		}
      // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间,计算出还剩多长时间需要去触发函数
        const remainTime = interval - (nowTime - lastTime)
        if (remainTime <= 0) {
           if (timer) {
			clearTimeout(timer)
			timer = null
		 } 
        // 真正触发函数
          fn.apply(this, args)
        // 保留上次触发的时间
          lastTime = nowTime
          return
        }
        if (trailing && !timer) {
		  timer = setTimeout(() => {
			timer = null
			lastTime = !leading ? 0 :new Date().getTime()
			fn.apply(this, args)
			},remainTime)
		}
      }
      // 取消功能
   _throttle.cancel = function() {
	  if(timer) clearTimeout(timer)
	  timer = null
	  lastTime = 0
	}
      return _throttle
    }

使用 throttle(函数, 时间, {leading: true,trailing: true})
leading 为true时 第一次触发
trailing 为true时 最后一次触发

在vue项目中使用

methods: {
函数写成es5格式
	函数: throttle(function () {
	},时间)
}