JS对象类型-函数进阶篇-函数节流和函数防抖

函数防抖

函数防抖就是短时间内频繁触发的事件或函数，指定时间间隔内频繁触发会被忽略掉。

比较常见的如搜索联想功能，如果打字很快，这期间不需要调用后台接口。

// 防抖函数
function debounce(method, context) {
  clearTimeout(method.tId)

  method.tId = setTimeout(function(){
    method.call(context)
  }, 500)
}

// 使用
var demo = function(){
  console.log(1)
}

window.onresize = function(){
  debounce(demo, window)
}

函数节流

函数节流是使短时间内连续执行的事件或函数，变为固定时间间隔执行。

比较常见的比如疯狂点击轮播图的按钮时，轮播图依旧按照指定的轮播时间执行。射击游戏疯狂触发mousedown/keydown事件时，子弹按照指定间隔时间发射。

// 节流函数
function throttle(method, context) {
  if(method.tId) { // 忽略新函数
  	return false;
  }

  method.tId = setTimeout(function(){
    clearTimeout(method.tId)
    method.tId = null
    method.call(context)
  }, 500)
}

// 使用
var demo = function(){
  console.log(1)
}

window.onresize = function(){
  throttle(demo, window)
}

下面是一个完整的节流函数，接收两个参数：第一个表示要被延时的函数；第二个表示延时的时间。

var throttle = function(method, time) {
var _self = method, timer = null, firstTime = true;
return function() {
var args = arguments, _this = this;
if(firstTime) {
  _self.apply(_this, args); // 首次触发，无需延时
  return firstTime = false;
}
if(timer) { // 定时器还在，说明当前函数未执行完，后续函数忽略
  return false;
}
timer = setTimeout(function(){
    clearTimeout(timer)
    timer = null
    _self.apply(_this, args)
    }, time || 500)
  }
}

window.onresize = throttle(function(){
  console.log(1);
}, 500 );

节流函数和防抖函数是有区别的：节流函数是指定间隔内触发，比如每1秒执行一次，那么无论你触发多么频繁它都不关心，必须1秒后才执行；而防抖函数是要两次触发的间隔时间超过指定时间，所以这期间如果频繁触发都会被忽略掉。