节流阀和去抖动的基本实现

sPeng 发布于2019-08-23 16:53 / 2024人阅读

摘要：节流阀触发的事件以周期的形式去执行，而非实时。如滴水的水龙头。利用闭包变量时效性不执行不执行不需要时释放内存去抖动事件最后一次触发的毫秒后触发，如电梯门。

节流阀throttle

触发的事件以周期的形式去执行，而非实时。如滴水的水龙头。

function throttle (fn, delay) {
  // 利用闭包变量时效性
  let timeout
  let arg
  return function () {
    arg = arguments
    if (!timeout) {
      timeout = setTimeout(() => {
        fn.apply(this, arg)
        timeout = null
      }, delay)
    }
  }
}
// demo
/*
var test = throttle(function (a) {console.log(a)}, 1000)
test(1) // 不执行
test(2) // 不执行
test(3)
=> 3
test = null // 不需要时释放内存
*/

去抖动debounce

事件最后一次触发的N毫秒后触发，如电梯门。

function debounce (fn, delay){
  let timeout
  return function(){
    const args = arguments
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}
// 用法同throttle

云服务器服务器托管节流阀函数节流节流基本的html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103454.html

JavaScript 五十问——认真聊一聊去抖与节流

摘要：前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔而去抖动会指定事件不触发的时间间隔。前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔...

chadLi 2019-08-02 14:05 评论0 收藏0
JavaScript 五十问——认真聊一聊去抖与节流

摘要：前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔而去抖动会指定事件不触发的时间间隔。前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔...

EscapedDog 2019-08-23 14:38 评论0 收藏0
前端常用代码片段(三)

摘要：可以是数字或者是字符串如果是数字则表示属性名前加上空格符号的数量，如果是字符串，则直接在属性名前加上该字符串。最后更新于2019年1月13日前端常用代码片段(一) 点这里前端常用代码片段(二) 点这里前端常用代码片段(三) 点这里前端常用代码片段(四) 点这里前端常用代码片段(五) 点这里前端常用代码片段(六) 点这里 1.打乱数组中元素顺序（类似音乐随机播放） function...

U2FsdGVkX1x 2019-08-21 16:25 评论0 收藏0
JavaScript 函数节流和函数去抖应用场景辨析

摘要：函数节流和去抖的出现场景，一般都伴随着客户端的事件监听。函数节流的核心是，让一个函数不要执行得太频繁，减少一些过快的调用来节流。概述也是好久没更新源码解读，看着房价蹭蹭暴涨，心里也是五味杂陈，对未来充满恐惧和迷茫 ...（敢问一句你们上岸了吗）言归正传，今天要介绍的是 underscore 中两个重要的方法，函数节流和函数去抖。这篇文章不会涉及具体的代码实现（关于代码实现请期...

ZHAO_ 2019-08-21 14:35 评论0 收藏0
防抖动与节流

摘要：防抖动节流节流使得一定时间内只触发一次函数。它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。防抖动与节流针对一些会频繁触发的事件如scroll、resize，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。所以我们对于这种事件我们要进行防抖动或...

Yangyang 2019-08-21 17:41 评论0 收藏0