函数节流和防抖

在Javascript中处理事件 ， 鼠标、滚动条等操作dom, 需要持续运算，会影响性能。 本篇文章中简单了解一下利用函数节流和函数防抖来提高效率，函数节流和防抖不属于语法，而是为了提高Javascript的执行效率采用的一种思路

了解一下，什么是函数节流

函数节流 (throttle) , 这个单词翻译一下是喉咙的意思， 而节流呢，简单理解 一个滚动条，如果每次滚动都要触发函数，那么很影响效率，滚动个一屏再触发就会避免一直访问 ， 而函数节流就是从这个
角度触发，控制函数执行次数

函数节流 ： 控制函数在一定时间内只执行一次，减少函数执行次数

控制节流的方法很多，比如

1. 利用时间戳

    function throttle(fn, wait) {
      var pre = 0;
      return function () {
        var now = new Date();
        if (now - pre > wait) {
          fn();
          pre = now;
        }
      }
    }
   input.onkeydown = throttle(function () {
     console.log(input.value);
   }, 1000);
   

   throttle函数中传入要执行的函数和需要等待时间，只有过了等待时间，才会去执行传入的函数

2. 利用定时器

    function throttle(fn, wait) {
      var timer;
      return function () {
        if (!timer) {
          timer = setTimeout(function () {
            timer = null;
            fn();
          }, wait);
        }
      }
    }
   input.onkeydown = throttle(function () {
     console.log(input.value);
   }, 1000);
   

   这段代码比之前的稍微有点复杂，但是思路是一样的，代码是在定时器中调用，调用完了将定时器清空，这样代码进入的时候，通过判断是否存在定时器，有定时器就表明当前用需要执行函数，没有才会去创建定时器

什么 函数防抖

函数防抖 ： debounce , 举例说明 , 还是以滚动条为例吧，当我们向下滚动的时候，不停滑动滚轮会不停地触发事件，这样是会消耗浏览器性能，采用防抖的思想，就是等滚动滚动结束的时候，触发一次函数，

函数防抖 ： 将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次

• 如下代码

  const div=document.querySelector("div");
  let n=0;
  
  div.onmousemove=debounce(function(){
    n++;
    div.innerHTML=n;
  },500);
  
  function debounce(fn,wait){
    let timer;
    return ()=>{
      clearTimeout(timer);
      timer=setTimeout(fn,wait);
    }
  }
  

  上边代码中，鼠标移动时，触发debounce函数，在debounce函数内，不管是否存在定时器，先清除，在重新定义，达到函数防抖的目的。
  上边的代码， 举个最简单的例子，一群人上公交车，一般司机关门是要看用户上来几秒后去关门的，这时候，如果新上来乘客，司机需要重新等待几秒之后，再去关门