温馨提示×

温馨提示×

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

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

javascript实现节流和防抖函数

发布时间:2020-10-26 15:37:44 来源:亿速云 阅读:162 作者:Leah 栏目:开发技术

javascript实现节流和防抖函数?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

1.节流函数throttle

// 节流方案1,每delay的时间执行一次,通过开关控制
function throttle(fn, delay, ctx) {
  let isAvail = true
  return function () {
    let args = arguments // 开关打开时,执行任务 
    if (isAvail) {
      fn.apply(ctx, args)
      isAvail = false // delay时间之后,任务开关打开 
      setTimeout(function () { isAvail = true }, delay)
    }
  }
}
// 节流方案2,通过计算开始和结束时间
function throttle(fn,delay){
      // 记录上一次函数出发的时间
      var lastTime = 0
      return function(){
      // 记录当前函数触发的时间
      var nowTime = new Date().getTime()
      // 当当前时间减去上一次执行时间大于这个指定间隔时间才让他触发这个函数
      if(nowTime - lastTime > delay){
        // 绑定this指向
        fn.call(this)
        //同步时间
        lastTime = nowTime
      }
      }
    }

2.防抖debounceTail

2.1)只执行首次

// 防抖 且首次执行
// 采用原理:第一操作触发,连续操作时,最后一次操作打开任务开关(并非执行任务),任务将在下一次操作时触发)
function debounceStart(fn, delay, ctx) {
  let immediate = true 
  let movement = null
  return function() {
    let args = arguments
    
    // 开关打开时,执行任务
    if (immediate) {
      fn.apply(ctx, args)
      immediate = false
    }
    // 清空上一次操作
    clearTimeout(movement)
    
    // 任务开关打开
    movement = setTimeout(function() {
      immediate = true
    }, delay)
  }
}

2.2)只执行最后一次

// 防抖 尾部执行
// 采用原理:连续操作时,上次设置的setTimeout被clear掉
function debounceTail(fn, delay, ctx) {
  let movement = null
  return function() {
    let args = arguments
    
    // 清空上一次操作
    clearTimeout(movement)
    
    // delay时间之后,任务执行
    movement = setTimeout(function() {
      fn.apply(ctx, args)
    }, delay)
  }
}

关于javascript实现节流和防抖函数问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

向AI问一下细节

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

AI