防抖与节流

防抖函数

防抖是在一段时间内若重复请求执行函数,则重新计时,直到该段时间内没有执行该函数，才执行该函数。

应用场景:输入框连续输入防抖

/**
 *防抖函数
 */
function debounce(fn, wait){
    var timeout = null 
	return function(){
	    if(timeout !== null )
		clearTimeout(timeout)
		// 此处如果不是箭头函数则this指向window对象 如果是箭头函数指向dom对象
		timeout = setTimeout( function(){
			fn.apply(this,arguments)
		}, wait)
	}
}

节流函数

节流是在一段时间内只允许函数执行一次。

应用场景:滚动条连续滚动,浏览器窗口连续缩放,鼠标连续移动事件

/**
 *节流函数
 */
function throttle(fn, wait) {
  // 通过闭包存储了一个变量
  var canRun, timeout
  return function() {
    if(canRun === false) return
    canRun = false
	clearTimeout(timeout)
	timeout = setTimeout(() => {
	  // 此处是apply 因为arguments是数组
	  fn.apply(this, arguments)
	  canRun = true
	}, wait)
  }
}