搜索请求如何处理（节流），防抖与节流，trottle函数实现

防抖和节流的作用都是防止函数多次调用。防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。
区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的情况会每隔一定时间（参数wait）调用函数。

防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
运用：拍照、下拉触底加载下一页、点击触发的事件中
节流高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
运用：搜索框的查询

防抖的两种情况的实现：

当我们触发某个事件的时候，先让函数延时了 wait 时间在执行函数的内容。
1).首先，定义一个变量，存放定时器，
2).判断如果定时器存在，就清除定时器，第一次调用setCount函数定时器是不存在的，所以等待了 wait 时间，执行了一次 fun 函数，当我们一直调用setCount函数时，定时器会一直存在，期间不会执行 fun 函数，直到我们不调用setCount函数，定时器会等待wait时间，才又执行了下一次 fun 函数...

//先防抖后执行
function setCount(fun,wait){
    let timeout; //定义一个变量，存放定时器
    return function(){
    if(timeout) clearTimeout(timeout) //如果定时器存在，就清除定时器，第一执行函数是不存在的，向下继续执行
      timeout=setTimeout(function() {
          fun.apply(this)
      }, wait);
    }
  }
}

当我们触发某个事件的时候，先执行一次函数，再进行延时，思路和第一种方法的思路差不多，中间加了一个判断，当定时器不存在时，先执行了一次fun方法。
1). 首先，定义一个变量，存放定时器，
2). 判断如果定时器存在，就清除定时器，如果不存在就先执行一遍方法，第一次触发setCount函数定时器是不存在的，所以先执行了fun方法，等待了 wait 时间，执行了下一次方法，期间当我们一直触发setCount事件时，定时器一直存在，所以中间不会执行fun方法，直到wait时间后再执行下一次方法

//输出在前  防抖在后
function setCount(fun,wait){
    let timeout;
    return function(){
        if(timeout) clearTimeout(timeout)
        if(!timeout) fun.apply(this)
        timeout=setTimeout(function() {
            fun.apply(this)
        }, wait);
        }
    }

节流实现的两种方式：

通过 setTimeout()，相当于每隔wait时间执行一次函数，每次触发setCount函数的时候 timeout 都是存在的，隔wait时间后设置 timeout=null，所以就相当于每隔wait时间执行一次。

function setCount(fun,wait){
    let timeout;
    return function(){
        if(!timeout){
            timeout=setTimeout(function(){
                fun.apply(this)
                timeout=null
            },wait)
          }
    }

首先设置一个初始时间，在返回的函数中定义一个变量获取当前的时间，如果两个值的差大于等待的时间，就让它执行 fun 函数，执行完函数把获取的当前时间的值赋值给初始值，这样就起到了节流的效果，搜索框的搜索功能用这个方法比较多。

  function setCount(fun,wait){
    let oldtime=0;
    return function(){
        let newtime = new Date()
        if(newtime-oldtime>wait){
            fun.apply(this)
            oldtime=newtime
         }
    }
  }

最后编辑于：2020.06.19 12:54:20