js节流与防抖

javascript节流、防抖。

知识点：闭包、作用域，arguments、call()、apply()、bind() 的用法。

防抖

事件在n秒后执行触发，如果在n秒内再次触发事件，则重新计时。

<input id="input" type="text">

// 防抖
var debounce = function (fn, delay) {
  var timer = null;
  return function () {
    var that = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

var log = debounce(function (e) {
  console.log(e.target.value)
}, 3000)

var input = document.getElementById('input')
input.addEventListener('keyup', log)

节流

在固定的时间段内，事件被触发n次都不会执行，时间越过时间段后，事件会执行1次

<input id="input" type="text">

// 节流
var throttle = function (fn, delay) {
  var timer = null;
  var startTime = Date.now();
  return function () {
    var that = this;
    var args = arguments
    var remaining = delay - (Date.now() - startTime)
    clearTimeout(timer);
    if (remaining <= 0) {
      fn.apply(that, args)
      startTime = Date.now();
    } else {
      timer = setTimeout(function () {
        fn.apply(that, args)
        startTime = Date.now();
      }, remaining);
    }
  }
}

var log = throttle(function (e) {
  console.log(e.target.value)
}, 3000)


var input = document.getElementById('input')
input.addEventListener('keyup', log)

参考文章

arguments

7分钟理解JS的节流、防抖及使用场景

JS的防抖与节流