温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript中去抖与节流的示例分析

发布时间:2020-12-05 11:21:41 来源:亿速云 阅读:125 作者:小新 栏目:web开发

小编给大家分享一下JavaScript中去抖与节流的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

无论是面试还是在讨论浏览器优化过程中,都会涉及到去抖动和节流的问题。
总的来说,这二者是一种限制事件触发频率的方式。不同的是,节流会指定事件触发的时间间隔;而去抖动会指定事件不触发的时间间隔。从结果上来看,节流降低了时间处理的敏感度;而去抖对从触发事件先存储起来,等到超过指定事件间隔后,一起发送。
越来越晕,直接上代码:
HTML

<input type="text" oninput="fatch()">

这里有一个供用户搜索使用的input标签,有一个input事件会触发的处理函数fatch,这个fatch会根据input的value值向后台去请求联想词。
上面代码思路是没有问题的,但是如果不做触发限制的话,可能会产生大量的http请求,而这些请求里面很多可能意义不大,为我们的优化提供了空间;下面,我就采用节流和去抖两种思路来解决这个问题。(一般针对input这种情况,使用去抖解决;这里只是方便做代码说明)

节流
function jieliu (func, time){//func 执行函数, time 时间间隔
  let lastRun = null
  
  return function(){
    const now = new Date()
    if(now - lastRun > time){
      func(...arguments)
      lastRun = now
    }
  }
}


const listener = jieliu(function(value){//监听函数,指定间隔时间
  console.log(value)
}, 1000)

const input = document.querySelector("input")
//调用方法
input.addEventListener("input", function(event){
     listener(event.target.value)
})

以上是比较简单的节流实现以及基本的调用方式;使用闭包是为了保存每一次执行的lastRun。基本实现了限制请求频率的需求,但忽略了最后一个的触发。
改进如下:

function jieliu (func, time){// 触发时间间隔>time 发送请求
  let lastRun = null
  let timeout = undefined
  return function(){
    const self = this; 
    const now = new Date()
    if(now - lastRun > time){
      if(timeout){
        clearTimeout(timeout)
        timeout = undefined
      }
      func.apply(self, arguments)
      lastRun = now
    }
    else{
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
    }
  }
}

加入timeout,判断是否是最后一次请求。

去抖动
function qudou(func, time){
  let timeout = undefined
  
  return function(){
    const argu = arguments
    const self = this

    if(timeout){
      clearTimeout(timeout)
      timeout = undefined
    }else{
        timeout = setTimeout(func.apply(this, arguments), time)
    }
  }
}

以上简单实现去抖动,同样,最后一次事件不能够触发处理函数。

改进如下:

function qudou(func, time){//判断连续time时间内不触发,发送func请求
  let timeout = undefined;
  let lastRun = null
  return function(){
    const self = this
    const now = new Date()
    if(now - lastRun > time){
      func.apply(self, arguments)
    }
    else {
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
      else {
        clearTimeout(timeout)
        timeout = undefined
      }
    }
    lastRun = new Date()
  }
}

通篇写下来,节流主要的实现方式还是通过对比“now”与“lastRun”的时间差,进而减少处理函数的调用次数;而防抖还是通过settimeout来延缓处理函数的调用时机,进而把多次触发的结果汇总一起调用处理函数。

以上是“JavaScript中去抖与节流的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI