函数节流（throttle）与函数去抖（debounce）

bergwhite 发布于2019-08-23 15:40 / 2077人阅读

摘要：去抖主要针对的是频繁触发某个事件后，然后进行后续处理的场景。常见的就是频繁输入停止假设后进行查询等操作。函数接口定义实际需要调用的函数空闲时间返回调用函数函数接口定义延迟时间需要调用的函数返回函数

前言

做过前端的童鞋应该都知道lodash这个强大的使用工具库。为什么要写这篇文章呢，主要今天遇到一个问题，socket推送消息太频繁，导致saga频繁更新，页面有所卡顿，需要通过函数节流控制，发现自己突然不会写这样的代码，而且模糊了节流和抖动的区别。简单实现一下，源码其实复杂的多。

区别

节流：一些场景频繁触发，导致页面崩溃，资源加载重复等行为，需要控制执行频率，这个时候就叫做节流。
去抖：主要针对的是频繁触发某个事件后，然后进行后续处理的场景。常见的就是频繁输入停止3s(假设)后进行查询等操作。

_.debounce

函数接口定义：

@param fn实际需要调用的函数
@param second 空闲时间
@return callback 返回调用函数

const debounce = (fn, second) => {
    let timer = null
    return () => {
        clearTimeout(timer)
        timer = setTimeout(() =>{
            fn()
        }, second)
    }
}

_.throttle

函数接口定义：

@param delay延迟时间
@param fn需要调用的函数
@return cb返回函数

const throttle = (fn, delay) => {
    let last = 0
    return () => {
        let current = new Date()
        if(current-last > delay) {
           fn()
           last = current
        }
    }
}

GPU云服务器云服务器函数节流 js函数节流 php函数与函数调用最新函数与算法

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

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

JS中的函数去抖与节流

摘要：上段代码的一个问题是，事件会在定时器结束后被触发，因此会出现一定的延迟，如果想让事件被立即触发，可以使用以下的去抖函数但是，对于去抖来说，在某些场景下是不合适的，因此我们可以使用节流。参考文章游戏星人眼中的节流与去抖（很生动）函数去抖与节流 Debounce：函数去抖就是对于一定时间段的连续的函数调用，只让其执行一次Throttle：函数节流就是让连续执行的函数，变成固定时间段间断...

fuchenxuan 2019-08-23 10:49 评论0 收藏0
JS throttle与debounce的区别

摘要：可以看下面的栗子这个图中图中每个小格大约，右边有原生事件与节流去抖插件的与事件。即如果有连续不断的触发，每执行一次，用在每隔一定间隔执行回调的场景。执行啦打印执行啦打印执行啦节流按照上面的说明，节流就是连续多次内的操作按照指定的间隔来执行。一般在项目中我们会对input、scroll、resize等事件进行节流控制，防止事件过多触发，减少资源消耗；在vue的官网的例子中就有关于lod...

wawor4827 2019-08-22 16:11 评论0 收藏0
JS - debounce(去抖) 和 throttle(节流)

摘要：多次连续事件触发动作最后一次触发之后的指定时间间隔执行回调函数预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新的时间周期。定义为了避免某个事件在较短的时间段内（称为 T）内连续触发从而引起的其对应的事件处理函数不必要的连续执行的一种事件处理机制（高频触发事件解决方案）debounce：当调用动作触发一段时间后，才会执行该动作，若在这段时间间隔内又...

Mike617 2019-08-23 18:36 评论0 收藏0
JavaScript 函数节流和函数去抖应用场景辨析

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

ZHAO_ 2019-08-21 14:35 评论0 收藏0
前端常用代码片段(三)

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

U2FsdGVkX1x 2019-08-21 16:25 评论0 收藏0