节流防抖

节流防抖

归纳知识点
给dom绑定事件，事件触发执行操作函数。但是事件许多种，由于事件本身特性触发频率也大不相同，比如click跟onload事件相比，click可以随用户高兴一秒触发5次，onload确实页面加载完成被动触发一次。其实我们并不希望触发那么多次事件（耗费性能），就需要给事件的执行加一些限制。
这里说的是节流和防抖函数

• 节流
  将频繁的事件触发限制为delay之后的一次。由于考虑到如果一直在delay的时间内，那么函数永远不会触发。还需要一个duration来约定最大等待时间。

	function throttle(method, delay, duration){
  		var timer = null
  		var begin = new Date()
  		return function () {
    		var content = this
    		var args = arguments
    		var now = new Date()
    		if(timer) clearTimeout(timer)
		    if(now - begin >= duration) {//最大延时
      			method.apply(content,args)
	        	begin = now
    		} else {
      			timer = setTimeout(() => {//防抖
        		method.apply(content,args)
      			}, delay);
    }
  }
}
function abc(){
	console.log("一个操作")
}
window.onscroll = throttle(abc,500,1000)

可以看出如果在delay（500ms）时间内如果再进行操作，将会clear上个操作重新执行setTimeout。如果上次执行的时间与当前时间超过duration（1000ms）也会执行操作。

• 防抖
  函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。
  目的与节流一样，是缩减回调执行频率。区别在于防抖只执行一次（delay时间），多次化一次；而节流是限制执行时间间隔，每多长时间（wait）执行一次，多次化wait间隔的多次。

function debounce(method, wait=50, immediate=true ){
  let timer ,context, args
  
  const later = ()=> setTimeout(()=>{//定义延迟函数
    timer = null
    if(!immediate) {//判断非立即才执行
      method.apply(context, args)
      context = args = null 
    }
  },wait)
  return function (...params) {
    if(!timer) { //之前没有操作就创建一个延迟函数
      timer = later()
      if(immediate) {
        method.apply(context, args)
      } else {
        context = this
        args = params
      }
    } else { //之前有就清除
      clearTimeout(timer)
      timer = later()
    }
  }
}

可以看出。节流函数和防抖函数写法上的区别就是是否有duration