函数节流和函数防抖

函数节流和函数去抖

---

概念

• 看完一些资料之后，自己总结一下；

• 在有些dom操作中，比如浏览器的scroll（图片懒加载），或者窗口的resize;输入框的keydown和keyup事件（搜索内容输入，自动检索）等等；

• 如果每次触发上述事件，就去执行操作函数，如果单纯操作pc页面DOM元素，对性能的影响可能不会很明显，但是对于移动端是很明显的。因为操作dom元素会导致页面的reflow；性能不好会有页面明显的错乱和滞后，十分影响用户体验；

• 重要的是，如果每次触发执行函数，都要进行请求，那么就会在很短时间内触发n多次，会造成服务器很大的负担。所以，就是要进行请求的限制，以达到优化的目的；

   函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。过一段时间再眨一下；
   函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。在特定时间间隔内再次触发，则从新开始计时，只到停止调用，函数才会执行一次；

• 函数节流简单实现

  var ifcontinue = true;
  function jieliu(delay, fn) {
      if(!ifcontinue ) {
          return false;
      }
      var timer = "";
      var self = this;
      ifcontinue  = false;
      return function () {
          clearTimeout(timer);//使用定时器，首先清除定时器
          timer = setTimeout(function () {
              fn.call(self, arguments);
              ifcontinue  = true;
          },delay)
      }
  }
  function fn() {
      console.log("函数节流")
  }
  window.onscroll = jieliu(1000,fn);
  

  这样每次触发scroll事件，函数只会执行一次；再次触发再次执行；

• 函数防抖简单实现

  function fangdou(delay, fn) {
      var timer = null;
      var self = this;
      return function () {
          timer = setTimeout(function () {
              fn.apply(self, arguments);
          },delay)
      }
  }
  function fn() {
      console.log("防抖")
  }
  

  window.onscroll = fangdou(300,fn)