js防抖和节流

一、debounce防抖技术

防抖原理：是维护一个计时器，在规定的delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

防抖（debounce）应用场景：

• 每个调整大小/滚动都会触发统计事件。
• 验证文本输入（在连续文本输入后，发送Ajax请求进行验证）。
• 监视滚动scroll事件（在添加去抖动后滚动，只有在用户停止滚动后才会确定它是否已到达页面底部）。

function debounce(fn, delay) {
  var timer = null;
  return function() {
     // 清除已存在的定时器
     timer && clearTimeout(timer)
     timer = setTimeout(function() {
        fn.apply(this)
     }, delay)
  }
}
let $btn = document.getElementById('btn');
var fn = function() {
  console.log ('防抖旨在时间段内只触发最后一次执行' + new Date(Date.now()));
}
$btn.onclick = debounce(fn, 1000);

二、函数节流

函数节流（throttle）：函数执行一次后，只有在大于设置的执行周期后才会执行第二次。持续触发事件时，保证一定时间段内只调用一次事件处理函数。

节流（throttle）应用场景：

实现DOM元素的拖放功能mousemove。
搜索关联keyup。
计算鼠标移动距离mousemove。
画布模拟草图功能mousemove。
射击游戏中的 mousedown/keydown事件（每单位时间只能发射一颗- 子弹）。
监视滚动scroll事件（添加节流后，只要滚动页面，就会每隔一段时间才会计算）。

function throttle(fn, delay) {
  // 记录上次触发的时间戳
  var lastTime = 0;
  return function() {
     // 记录当前触发的时间戳
     var nowTime = Date.now();
     // 如果当前触发与上次触发的时间差值 大于 设置的周期则允许执行
     if (nowTime - lastTime > delay) {
        fn.call(this);
        // 更新时间戳
        lastTime = nowTime;
     }
  }
}
document.onscroll = function () {
  console.log ('节流旨在时间段内控制触发的频率'+new Date(Date.now()))
}