如何进行javascript的防抖节流函数解析

发布时间:2022-01-15 14:44:22 作者:柒染
来源:亿速云 阅读:327

这期内容当中小编将会给大家带来有关如何进行javascript的防抖节流函数解析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

防抖节流函数的解析

认识防抖和节流函数

防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动中

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数,也是面试经常被问到的面试题

但是很多前端开发者面对这两个功能,有点摸不着头脑:

认识防抖debounce函数

我们用一副图来理解一下它的过程:

如何进行javascript的防抖节流函数解析

防抖的应用场景很多:

防抖函数的案例

我们都遇到过这样的场景,在某个搜索框中输入自己想要搜索的内容

比如想要搜索一个MacBook:

但是我们需要这么多次的网络请求吗?

这就是防抖的操作:只有在某个时间内,没有再次触发某个函数时,才真正的调用这个函数;

认识节流throttle函数

我们用一副图来理解一下节流的过程

如何进行javascript的防抖节流函数解析

节流的应用场景:

节流函数的应用场景

很多人都玩过类似于飞机大战的游戏

在飞机大战的游戏中,我们按下空格会发射一个子弹:

如何进行javascript的防抖节流函数解析

自定义防抖和节流函数

我们按照如下思路来实现:

防抖基本功能实现:可以实现防抖效果

function debounce(fn,delay,immediate=false,resultCallback){
  let timer=null
  // console.log(this)//window
  // 定义控制立即执行的变量,false表示没有执行过
  let isInvoke=false
  // 真正的处理函数
  function _debounce(...args){
    // 取消事件执行操作
    if(timer) clearTimeout(timer)
    // console.log(this)//element元素
    if(immediate&&!isInvoke){
      const result=fn.apply(this,args)
      resultCallback(result)
      isInvoke=true
    }else{
      // 延迟执行
      timer=setTimeout(()=>{
        const result=fn.apply(this,args)
        resultCallback(result)
        timer=null
        isInvoke=false
      },delay)
    }
  }
  // 封装取消请求
  _debounce.cancel=function(){
    if(timer) clearTimeout(timer)
    timer=null
    isInvoke=false
  }
  return _debounce
}

我们按照如下思路来实现:

节流函数的基本实现:可以实现节流效果

function throttle(fn,interval,options={leading:true,trailing:false}){
  let lastTime=0
  const {leading,trailing,resultCallback}=options
  let timer=null
  function _throttle(...args){
    const nowTime=new Date().getTime()
    // leading优化
    if(!leading&&!lastTime) lastTime=nowTime
    let remainTime=interval-(nowTime-lastTime)
    if(remainTime<=0){
      if(timer){
        clearTimeout(timer)
        timer=null
      }
      // 参数优化
      const result=fn.apply(this,args)
      if(resultCallback) resultCallback(result)
      lastTime=nowTime
      return
    } 
    // 优化trailing
    if(!timer&&trailing){
      timer=setTimeout(()=>{
        // 参数优化
        const result=fn.apply(this,args)
        if(resultCallback) resultCallback(result)
        timer=null
        lastTime=!leading?0:new Date().getTime()
      },remainTime)
    }
  }
  _throttle.cancel=function(){
    if(timer) clearTimeout(timer)
    timer = null
    lastTime = 0
  }
  return _throttle
}

上述就是小编为大家分享的如何进行javascript的防抖节流函数解析了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 函数节流和防抖
  2. javascript实现函数防抖与节流

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

javascript

上一篇:ReviewBoard指的是什么

下一篇:springboot整合quartz定时任务框架的方法是什么

相关阅读

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

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