节流和防抖动

hellowoody 发布于2019-08-22 15:41 / 2998人阅读

摘要：起因面试被问到了节流和防抖动自己对这两个的概念比较模糊都不知道回答了什么鬼从语文和英语学起首先先看字面意思节流的意思就是水龙头关小点频率不要那么高防抖动这根弹簧你不要来回蹦了我就要你最后停下来的没有发生形变的那一刻举个例子节流在改变窗口大小

起因

面试被问到了节流和防抖动, 自己对这两个的概念比较模糊, 都不知道回答了什么鬼

从语文和英语学起

首先, 先看字面意思:
节流(throttle)的意思就是水龙头关小点, 频率不要那么高
防抖动(debounce), 这根弹簧, 你不要来回蹦了, 我就要你最后停下来的没有发生形变的那一刻

举个例子

节流: 在改变窗口大小的时候, resize事件会触发. 可能窗口大小变化了一下就触发了几十次事件, 但我希望就只触发那么十几次事件 , 这就叫节流.
防抖动: 在改变窗口大小的时候, resize事件会触发. 可能窗口大小变化了一下就触发了几十次事件, 但我希望只有在大小改变完(经过一定长的时间), 才触发一次事件 , 这就叫防抖动

简单的实现

虽然上面说了那么多, 但好像还不是很懂怎么用啊, 怎么写啊? 那就搜搜别人的博客和一些成熟的库看他们是怎么设计这个函数以及使用的

throttle

throttle(func, [wait=0])
Creates a throttled function that only invokes func at most once per every wait milliseconds(throttle方法返回一个函数, 在wait毫秒里, 这个函数最多只会调用一次func)

参数和返回值都知道了, 那就写吧

function throttle (func, wait = 0) {
  let timer
  let start
  let now

  return function () {
    const ctx = this
    const args = arguments
    now = new Date().getTime()
    // 如果不是第一次, 并且时间间隔还没有过去wait毫秒
    if (start && now - start < wait) {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout (() => {
        func.apply(ctx, args)
        start = now
      }, wait)
    } else {
      func.apply(ctx, args)
      start = now
    }
  }
}

debounce

debounce(func, [wait=0])
Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked(debounce方法返回一个函数, 这个函数的调用func的间隔, 至少隔了wait毫秒)

function debounce (func, wait = 0) {
  let timer

  return function () {
    const ctx = this
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(ctx, args)
    }, wait)
  }
}

应用与实践

到这里, 单单看代码的话, throttle和denounce也是贼像. 还是要应用多了才能更深入地理解的. 然而自己应用上也是浅薄, 还是安利一下别人的文章吧, Debouncing and Throttling Explained Through Examples, 中文翻译

其他的参考文章:
分析_的.debounce和.throttle
Debounce 和 Throttle 的原理及实现

GPU云服务器云服务器函数节流节流保存字节流节流阀

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

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

关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

张红新 2019-08-22 16:45 评论0 收藏0
关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

lieeps 2019-08-29 15:12 评论0 收藏0
关于js节流函数throttle和防抖动debounce

摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。废话不多说，直奔主题。什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...

shery 2019-08-02 10:18 评论0 收藏0
JS之节流和防抖

摘要：节流在指定时间之内，让函数只触发一次。防抖对于一定时间段的连续的函数调用，只让其执行一次。总结以上只是很简单的写了一下节流和防抖的原理，在里，实现起来更加复杂，但是背后的原理核心就是上边代码写的。概述在平时的开发中，经常会听到两个差不多很相近的词。节流（throttle）和防抖（debounce）。这是两个类似又有些不同的优化方案。节流：在指定时间之内，让函数只触发一次。防...

fevin 2019-08-26 17:15 评论0 收藏0
理解节流和防抖

摘要：所以针对此类事件则需要进行节流，或者防抖动处理。节流判断是否已空闲，如果在执行中，则直接函数节流二防抖对于一定时间段内的连续的函数调用，只执行一次原理其实就是一个定时器，当我们触发一个事件时，让这个事件延迟一会在执行。在浏览器dom事件里面，一些事件会随着用户的操作不间断的触发，比如：为一个元素绑定拖拽事件，为页面绑定resize事件（重新调整浏览器窗口大小），页面滚动。如果dom操...

zebrayoung 2019-08-22 16:48 评论0 收藏0