函数防抖与截流

函数防抖

代码如下：

// 设置一个默认值 300ms
const oCount2 = document.getElementById('count2');
const oIpt2 = document.getElementById('ipt2');

// 设置一个默认值 300ms
const debounce = (fn, wait = 300) => {
  let time = null
  return function(arguments) {
    const _this = this, args = arguments
    clearTimeout(time)
    time = setTimeout(() => {
      fn.apply(_this, [args])
      // fn.call(_this, args)   //或者使用这个
    }, wait)
  }
}

let init2 = 0
oIpt2.onkeyup = debounce(function() {
  oCount2.innerText = ++init2
}, 500)  //可以自己定义延迟时间间隔

效果：

可以看到，加了防抖函数之后，当我们在频繁输入的时候，函数并没有执行， 只有在函数指定的间隔内（500ms）不再输入了，才会执行函数。如果在时间间隔之内继续输入，会触发函数重新计数。

函数防抖的概念：在事件触发后的n秒之后，再去执行真正需要执行的函数，如果在这n秒之内事件又被触发，则重新开始计时。

函数截流

代码如下：

const oCount3 = document.getElementById('count3');
const oIpt3 = document.getElementById('ipt3');
const oTime = document.getElementById('time');

const throttle = (fn, threshhold = 1000) => {
  let last, deferTimer
  return function(arguments) {
    const _this = this, args = arguments
    let now = +new Date()
    if(last && now < last + threshhold) {
      clearTimeout(deferTimer)
      deferTimer = setTimeout(function () {
          last = now
          fn.call(_this, args)
        }, threshhold)
    } else {
       last = now
         fn.call(_this, args)
    }
  }
}
let init3 = 0
const throttleIpt = throttle(function() {
  let time = new Date().getMinutes() + ':' + new Date().getSeconds()
  oTime.innerText = time
  oCount3.innerText = ++init3
}, 1000)  // 初始化一下

oIpt3.onkeyup = function() {
  throttleIpt()
}

效果：

可以看到，任由我们怎么输入，函数会按照我们设定的时间（1s），每秒执行一次。你可以设置更大。

函数截流的概念：规定好一个单位时间，触发函数一次。如果在这个单位时间内触发多次函数的话，只有一次是可被执行的。想执行多次的话，只能等到下一个周期里。

参考：前端性能优化之函数防抖与截流