【JavaScript】手写防抖

function debounce(func, wait, immediate) {
  // 增加立即执行参数 immediate
  // 增加返回值,当且只有在immediate为true的时候才会有返回值
  var timeout, result;
  var debounced = function() {
    // 将this指向正确的对象
    var context = this;
    // 接受event对象
    var args = arguments;
    if(timeout) clearTimeout(timeout);
    if(immediate) {
      var callNow = !timeout;
      timeout = setTimeout(function() {
        timeout = null
      }, wait)
      if(callNow) result =  func.apply(context, args)
    }  else {
      timeout = setTimeout(function(){
        func.apply(context, args)
      }, wait)
    }
    return result
  };

  debounced.cancel = function() {
    clearTimeout(timeout)
    timeout = null
  }

  return debounced
}

防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

只是防抖的话 可以简写成这种

function debounce(func, wait) {
  var timeout;
  return function() {
    var context = this;
    var args = arguments;
    if(timeout) clearTimeout(timeout)
    setTimeout(function() {
      func.apply(context, args)
    }, wait)
  }
}