防抖和节流简介

什么是防抖和节流

防抖

当事件被频繁触发时，不想让其频繁执行事件处理函数的一种解决方案。
该方案通过设定一个周期延迟执行动作，如果周期内又被重新触发，则重新设定周期，直到周期结束，执行动作。

节流

节流的方案是通过设定一个周期，在周期内只执行一次，如果在周期内重新触发事件，则不执行。一个周期结束后，开始新的周期。

为什么要防抖和节流

1. 频繁触发事件会占用较多浏览器资源造成浏览器卡顿
2. 响应速度跟不上触发速度，导致页面加载缓慢

防抖实现方式

function debounce(fun, delay) {
        var timer = null;
        return function(args) {
        //获取函数的作用域
            var that = this;
            //每次触发事件都会清除定时器，并重新设定超时调用
            clearTimeout(timer)
            timer = setTimeout(function() {
                fun.call(that, args);
            }, delay);
        }
    }

它规定了执行的周期，周期一到就执行，它的周期可能会一直延长，因为它的周期会重新计时
该方法适用于虽然触发事件很频繁但仍有间隔的情况

节流实现方式

 function throttle(fun, delay) {
  let last, deferTimer
  return function (args) {
   let that = this;
   let _args = arguments;
 //开始计时
   let now = +new Date();
   //如果在一个周期内，取消上一个定时器，重新设定定时器
   if (last && now < last + delay) {

   clearTimeout(deferTimer);
   deferTimer = setTimeout(function () {
   //开始新的周期
    last = now;
    fun.call(that, _args);
   }, delay)
   } else {
   //开始新的周期
   last = now;
   fun.call(that, _args);
   }
  }
  }

该方法由于触发事件的随机性需要通过时间戳计算执行周期，在周期内只执行一次，规定了执行的次数，它的周期是计算间隔的长度
该方法适用于一直触发事件中间没有间隔的情况

总结

1. 防抖和节流都是对与频繁触发事件的解决方案，旨在减少相应的次数以保持浏览器的高效运行
2. 防抖和节流各有特色，可以根据需要进行选择，防抖适用于有间隔的频繁触发事件的情况，节流适用于一直触发事件的情况