详谈js防抖和节流

最新推荐文章于 2024-10-21 15:12:29 发布
最新推荐文章于 2024-10-21 15:12:29 发布
阅读量167 收藏 1
点赞数
文章标签： js防抖和节流
本文深入探讨了防抖和节流技术，旨在解决高频率事件触发导致的性能问题。防抖确保事件触发n秒后执行，适用于输入框查询和窗口调整等场景；节流则在规定时间内限制事件触发次数，适合鼠标点击和滚动加载。文章提供了具体实例和代码实现。
本文由小芭乐发表

0. 引入

首先举一个例子：

模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>没有防抖</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function () {
            //模拟ajax请求
            function ajax(content) {
                console.log('ajax request ' + content)
            }
            let inputNormal = document.getElementById('normal');

            inputNormal.addEventListener('keyup', function (e) {
                ajax(e.target.value)
            })
        }
    </script>
</head>

<body>
    <div>
        1.没有防抖的输入：
        <input type="text" name="normal" id="normal">
    </div>
</body>

</html>

效果：在输入框里输入一个，就会触发一次“ajax请求”（此处是console）。

![](https://img2018.cnblogs.com/blog/1557854/201812/1557854-20181212193030330-1117758259.png)

没有防抖和节流

缺点：浪费请求资源，可以加入防抖和节流来优化一下。

本文会分别介绍什么是防抖和节流，它们的应用场景，和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。但二者应对的业务需求不一样，所以实现的原理也不一样，下面具体来看看吧。

1. 防抖（debounce）

1.1 什么是防抖

在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

1.2 应用场景

(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；

(2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；

1.3 实现

还是上述列子，这里加入防抖来优化一下，完整代码如下：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>加入防抖</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function () {
            //模拟ajax请求
            function ajax(content) {
                console.log('ajax request ' + content)
            }
            function debounce(fun, delay) {
                return function (args) {
                    //获取函数的作用域和变量
                    let that = this
                    let _args = args
                    //每次事件被触发，都会清除当前的timeer，然后重写设置超时调用
                    clearTimeout(fun.id)
                    fun.id = setTimeout(function () {
                        fun.call(that, _args)
                    }, delay)
                }
            }
            let inputDebounce = document.getElementById('debounce')
            let debounceAjax = debounce(ajax, 500)
            inputDebounce.addEventListener('keyup', function (e) {
                debounceAjax(e.target.value)
            })
        }
    </script>
</head>

<body>
    <div>
        2.加入防抖后的输入：
        <input type="text" name="debounce" id="debounce">
    </div>
</body>

</html>

代码说明：

1.每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。 这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；

2.只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行；

效果：

加入防抖后，当持续在输入框里输入时，并不会发送请求，只有当在指定时间间隔内没有再输入时，才会发送请求。如果先停止输入，但是在指定间隔内又输入，会重新触发计时。

![](https://img2018.cnblogs.com/blog/1557854/201812/1557854-20181212193047164-175003873.png)

加入防抖

2.节流（throttle）

2.1 什么是节流

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

2.2 应用场景

(1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

(2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；

(3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

2.3 实现

还是上述列子，这里加入节流来优化一下，完整代码如下：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>加入节流</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function () {
            //模拟ajax请求
            function ajax(content) {
                console.log('ajax request ' + content)
            }

            function throttle(fun, delay) {
                let last, deferTimer
                return function (args) {
                    let that = this;
                    let _args = arguments;

                    let now = +new Date();
                    if (last && now < last + delay) {
                        clearTimeout(deferTimer);
                        deferTimer = setTimeout(function () {
                            last = now;
                            fun.apply(that, _args);
                        }, delay)
                    } else {
                        last = now;
                        fun.apply(that, _args);
                    }
                }
            }
            let throttleAjax = throttle(ajax, 1000)
            let inputThrottle = document.getElementById('throttle')
            inputThrottle.addEventListener('keyup', function (e) {
                throttleAjax(e.target.value)
            })
        }
    </script>
</head>

<body>
    <div>
        3.加入节流后的输入：
        <input type="text" name="throttle" id="throttle">
    </div>
</body>

</html>

效果：实验可发现在持续输入时，会安装代码中的设定，每1秒执行一次ajax请求

![](https://img2018.cnblogs.com/blog/1557854/201812/1557854-20181212193122217-45133779.png)

加入节流

3. 小结

总结下防抖和节流的区别：

-- 效果：

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

-- 原理：

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。

如有问题，欢迎指正。

此文已由作者授权腾讯云+社区发布，更多原文请点击

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

我的乌托
关注
JS防抖、节流的实现以及应用场景
没有感情的代码机器的博客
11-24 432
先来看一下没有做防抖节流处理的情况。可以发现，只要按下键盘就会触发函数调用，这样在某些情况下会造成资源的浪费，在这些情况下，可能只需要在输入完成后做请求，比如身份验证等。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view...
详谈js对url进行编码和解码(三种方式的区别)
10-19
JavaScript是一种广泛用于网页开发的脚本语言，其中对URL进行编码和解码是常见的需求。在Web开发中，编码主要是指对URL中的参数进行处理，以避免由于特殊字符导致的数据传输错误，而解码则是将编码后的URL还原为可读...
深入理解防抖和节流：应用场景及实现方式详解
你若盛开，清风自来
07-08 1万+
防抖和节流是在JavaScript中常用的两种技术，用于限制某个函数在短时间内被频繁调用。防抖的原理是在事件被触发后，延迟一定时间执行函数，如果在延迟时间内触发了该事件，则重新计时，直到延迟时间内没有再次触发事件，才执行函数。节流的原理是在规定的时间内，只让函数执行一次，无论事件触发的频率如何。防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。
介绍防抖节流原理、区别以及应用，并用javascript进行实现
m0_46498310的博客
11-25 518
介绍防抖节流原理、区别以及应用，并用javascript进行实现 防抖：当一个事件触发时候，需要等待n秒以后执行回调，如果在等待的n秒内该事件又被触发了，那么需要重新计时等待n秒。 使用场景: 搜索框联想：防止联想发送请求，只发送最后一次 按钮提交的场景，防止多次提交按钮，只执行最后一次提交 简单版本 <button class="debounce-btn">简单版防抖</button> <script> // 防抖：在事件被触发n秒后再次执行回调，如
防抖节流原理，区别及应用，并用JavaScript进行实现（-防抖篇）
weixin_45519244的博客
02-20 269
防抖 - 原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 - 适用场景： 。按钮提交场景：防止多次提交按钮，只执行最后一次的提交 。搜索框联想场景：防止联想发送请求，只执行最后一次的输入 -简易版实现 function debounce(func, wait) { let timeout; return function () { const context = this; const args = arguments;
详谈js使用in和hasOwnProperty获取对象属性的区别
10-19
在JavaScript中，获取对象属性可以通过多种方式实现，其中两个常用的方法是使用`in`关键字和`hasOwnProperty`方法。这两个方法虽然都可以用来判断对象是否具有某个属性，但是它们之间存在着明显的区别和特定的使用...
详谈JS中数组的迭代方法和归并方法
12-04
每个方法都要接收两个参数：要在每一项上面运行的函数和（可选的）运行该函数的作用域对象—影响this的值。 传入方法中的函数会介绍三个参数：1.数组项的值 2. 该项在数组的中位值 3. 数组对象本身； every()和some...
详谈js中数组(array)和对象(object)的区别
12-03
•object 类型： ◦ 创建方式： /*new 操作符后面Object构造函数*/ var person = new Object(); ...• 区别和不解 ◦ 比如有一个数组a=[1,2,3,4]，还有一个对象a={0:1,1:2,2:3,3:4}，然后你运行a
防抖节流原理，区别及应用，并用JavaScript进行实现（-节流篇）
weixin_45519244的博客
02-21 195
节流  - 原理：规定在一个单时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。  - 适用场景：   。拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动   。缩放场景：监控浏览器resize  - 使用时间戳实现         。使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳（最开始设置为0）如果大于设置的时
【Day04】介绍防抖节流原理、区别以及应用，并用 JavaScript 进行实现
zimeng303的博客
02-05 325
介绍防抖节流原理、区别以及应用，并用 JavaScript 进行实现防抖函数一、实现原理二、适用场景三、代码实现简易版 (非立即执行版) 实现立即执行版实现返回值版实现节流函数一、实现原理二、适用场景三、代码实现使用时间戳实现使用定时器实现加强版节流函数 throttle 防抖函数 一、实现原理 在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。 二、适用场景 按钮提交场景：防止多次提交按钮，只执行最后提交的一次 搜索框联想场景：防止联想发送请求，只发送最后一次输入
函数防抖与节流区别及应用场景介绍
weixin_47198024的博客
06-27 675
1.函数防抖 ： 用户多次触发事件，以最后一次触发为准 2.函数节流 : 限制事件的执行周期 (500ms内只会执行一次) 3.函数防抖与函数节流异同点 与 应用场景 (1) 相同点 ： 都是为了优化js代码执行频率，提高代码性能 (2) 不同点 ： 函数防抖 ：由用户需求决定 a. 鼠标移入移出 ： 用户快速移动鼠标，应该等用户结束移动后，以最后一次为主 b. 输入框事件 :
前端防抖（Debounce）和节流（Throttle）详解
热门推荐
m0_64974617的博客
10-21 2万+
防抖是一种延迟执行的技术。它的原理是，当事件被触发时，延迟执行事件处理函数，并且在延迟时间内如果事件再次被触发，则重新开始计时。只有当事件在指定的时间内没有再次触发，事件处理函数才会执行。这样可以避免某些高频率的操作被频繁触发，从而提高性能。节流是一种限制函数执行频率的技术。它的原理是，当事件被频繁触发时，函数会按照一定的时间间隔执行，而不是每次触发事件都执行。换句话说，在一个时间段内，只会执行一次事件处理函数。防抖和节流是前端优化中常用的技术，合理使用可以显著提升用户体验和系统性能。
防抖和节流—应用场景及实现
Liuer_Qin的博客
09-05 343
防抖和节流 防抖 概念 假定时间间隔为200ms，如果触发事件后的200ms内再次触发事件，则重新等待200ms，否则将成功执行指定函数。 应用场景 数据查询、监控用户输入 代码实现 function search() { var t = null; // 使用闭包 return function () { if (t) { clearTimeout(t); t = null } t = setTimeout(() => { console.log('执行
前端防抖节流（附一张有意思的动态图解）
zsq199771的博客
12-17 725
如图所示，防抖节流应该就很明朗了 防抖释义：函数防抖（debounce） 当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。 案例：持续触发scroll事件时，并不立即执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发一次handle函数。 function debounce(fn, wait) { let timeout = null return function() { if.
防抖和节流，及他们的应用场景
weixin_40030173的博客
06-30 133
防抖 (debounce) 防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。 想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢? 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖。 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖。 文本编辑器实时保存，当无任何更改操作一秒后进行保存 代码如下，可以看出来「防抖重在清零 clearTimeout(timer)」
防抖和节流如何实现
weixin_41552521的博客
01-13 1701
防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间（思路—每次触发事件时都取消之前的延时调用方法） /* 防抖 */ function dou(fn, wait) { var time = null; return function () { clearTimeout(time) ...
前端实现节流与防抖（纯代码-可直接拉取）
今天也要爱小姜的博客
06-10 556
节流与防抖实例
前端JavaScript防抖、节流实现
weixin_42397018的博客
04-08 308
防抖&节流 在前端开发中部分用户行为会频繁的触发事件执行，对于dom操作，网络请求等耗费性能的处理，很可能导致界面卡顿，甚至浏览器崩溃。函数节流和函数防抖就是为了解决类似的问题。 节流 函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。 <div id="show">0</div> <button id="btn">click&l...
标准io和文件io详谈
最新发布
04-28
<think>嗯，用户想了解标准IO和文件IO的区别及详细使用方法。我需要先回顾一下相关知识，确保自己理解正确。根据提供的引用内容，标准IO是C库函数，比如fopen、fclose这些，而文件IO是系统调用，比如open、read、write。区别主要在于缓冲机制和应用层与内核层的交互。 首先，标准IO有缓冲区，数据先存到应用层的缓冲区，等满了或者满足条件时才调用系统调用写入内核缓冲区。这样可以减少系统调用的次数，提高效率。而文件IO每次操作都是直接系统调用，没有缓冲，适合需要实时读写的场景，比如设备文件或者网络套接字。 接下来，用户可能想知道具体的使用方法，比如函数列表和例子。需要分别列出标准IO和文件IO常用的函数，比如fopen对应open，fread对应read等。同时，要说明它们的参数和用法差异，比如标准IO用FILE指针，文件IO用文件描述符。 另外，用户可能关心它们的适用场景。比如标准IO适合普通文件操作，尤其是需要频繁读写的情况，而文件IO适合底层操作或者特殊文件类型。需要结合引用中的例子，比如标准IO的缓冲区大小如何计算，以及文件IO如何直接操作设备文件。 还要注意用户可能的误区，比如标准IO和文件IO是否可以混用。需要提醒他们避免混用，因为缓冲机制可能导致数据不一致。此外，错误处理的方式也不同，标准IO用ferror，文件IO用errno。 最后，生成相关问题时要覆盖性能分析、缓冲区设置、实际应用例子、错误处理和适用场景比较。这样用户可以根据问题进一步深入学习。</think>### 标准IO与文件IO的区别及详细使用方法 #### 一、核心区别 1. **层级与封装关系** - **标准IO**：应用层C库函数（如$fopen$, $fread$），对文件IO进行封装，自带缓冲机制[^1][^2] - **文件IO**：系统级调用（如$open$, $read$），直接操作内核接口，无缓冲[^1][^2] 2. **缓冲机制** - **标准IO**： - 全缓冲：默认模式，缓冲区满或调用$fflush$时触发系统调用 - 行缓冲：终端设备专用（如$stdout$），遇换行符或缓冲区满时触发 - 无缓冲：$stderr$等特殊场景[^3] - **文件IO**：无缓冲，每次调用$write$立即写入内核缓冲区 3. **性能对比** - 标准IO通过减少系统调用次数提升效率（例如连续写入10次数据仅触发1次$write$）[^1] - 文件IO适合实时性要求高的场景（如设备驱动开发） #### 二、具体使用对比 | 操作类型 | 标准IO函数 | 文件IO函数 | 参数差异 | |----------|-------------------------|----------------|------------------------| | 打开文件 | `FILE *fopen()` | `int open()` | 权限模式、返回值类型不同 | | 读取数据 | `size_t fread()` | `ssize_t read()` | 需指定FILE指针 vs 文件描述符 | | 写入数据 | `size_t fwrite()` | `ssize_t write()` | 标准IO含缓冲，文件IO直接操作 | | 关闭文件 | `int fclose()` | `int close()` | 释放资源逻辑不同 | **标准IO示例：** ```c FILE *fp = fopen("test.txt", "w"); if(fp) { fwrite("Hello", 1, 5, fp); // 数据暂存应用层缓冲区 fclose(fp); // 触发实际写入 } ``` **文件IO示例：** ```c int fd = open("test.txt", O_WRONLY|O_CREAT, 0644); if(fd != -1) { write(fd, "Hello", 5); // 立即写入内核缓冲区 close(fd); } ``` #### 三、选型指南 1. **优先标准IO的场景** - 普通文件读写（文本/二进制） - 需要格式输入输出（如`fprintf`） - 频繁小数据量操作 2. **必须用文件IO的场景** - 设备文件操作（如`/dev`目录下设备） - 需要文件锁定（`fcntl`） - 非阻塞IO或异步IO操作 #### 四、注意事项 1. **避免混用**：同一文件不应同时使用两种IO方式，可能导致缓冲数据丢失 2. **错误处理**： - 标准IO通过`ferror()`检测错误 - 文件IO通过`errno`全局变量获取错误码 3. **缓冲区控制**：可通过`setvbuf()`修改标准IO缓冲策略[^3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值