防抖和节流

对于某些频繁的事件处理,会对性能造成损耗,我们就可以通过防抖和节流来限制事件的频率。

防抖:只有在某个时间内没有再次出发某个函数,才调用真正的函数

节流:在某个时间内,某个函数只能触发一次

我们通过一个搜索框来延迟防抖函数的实现过程。

我们发现,输入一个lzyyyyy一共发送了7次请求

 

然后我们自定义一个防抖函数:

    function debounce(fun,delay){

      let timer = null

      return function(){

        if(timer) clearTimeout(timer);

        timer = setTimeout(function(){

          fun()

        },delay)

      }

    }

 

 

 

这里就只进行了一次请求。

 

定义一个节流函数

    // 节流函数

    function throttle(fun,interval){

      let last = 0

      return function() {

        let now = new Date().getTime()

        if(now-last>interval) {

          fun()

          last = now

        }

      }

    }

 

 

每隔一段时间就发送一次网络请求

posted @ 2020-08-02 17:39  esnlzy  阅读(116)  评论(0)    收藏  举报