常见前端面试题--防抖和节流

防抖（debounce）：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

// 防抖
function debounce(func, wait=0) {
  if (typeof func !== 'function') {
    throw new TypeError('需要一个函数');
  }
  let timeid = null;
  let result;
  
  return function() {
    let context = this;
    let args = arguments;
    
    if (timeid) {
      clearTimeout(timeid);
    }
    timeid = setTimeout(function () {
      result = func.apply(context, args);
    }, wait);
   
    return result;
  }
}
// 处理函数
function handle () {
  console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debouce(handle, 1000));

当持续触发scroll事件时，事件处理函数handle只在停止滚动1秒之后才会调用一次，也就是说在持续触发scroll事件的过程中，事件处理函数handle一直没有执行。
节流（throttle）：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

// 实现节流主要两种方式： 时间戳和定时器
// throttle代码（时间戳）
var throttle = function(func, delay) {
  var prev = Date.now();
  return function() {
    var context = this;
    var args = arguments;
    var now = Data.now();
    if (now - prev >= delay) {
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

// 定时器
var throttle = function(func, delay) {
  var timer = null;
  return function() {
    var context = this;
    var args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        func.aaply(context, args);
        timer = null;
      }, delay);
    }
  }
}

// 接下来，两种方式都一样
function handle() {
  console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

区别：
函数节流不管事件触发多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。