JavaScript防抖和节流

心已赠人 2021-09-19 22:42 323阅读 0赞

### 防抖 ###

1.  概念：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会触发。

> 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

1.  应用：百度搜索框。输入关键词之后会调用接口，获取联想词。但是，频繁调用接口会影响性能，所有此时应使用防抖：只有在用户输入完毕的一小段时间后，才会调用接口，出现联想词。
2.  代码

const debounce = (fn, delay) => {
     let timer = null;
     return (...args) => {
       clearTimeout(timer);
       timer = setTimeout(() => {
         fn.apply(this, args);
       }, delay);
     };
    };

### 节流 ###

1.  概念：指定的时间间隔内只会执行一次任务。

> 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

1.  应用

*  抢购商品。如果不采用节流，那么会有人可以用脚本在很短的时间内触发按钮多次；
 *  懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取；

1.  代码

const throttle = (fn, delay = 500) => {
     let flag = true;
     return (...args) => {
       if (!flag) return;
       flag = false;
       setTimeout(() => {
         fn.apply(this, args);
         flag = true;
       }, delay);
     };
    };

#### 参考链接 ####

*  [https://www.jianshu.com/p/c8b86b09daf0][https_www.jianshu.com_p_c8b86b09daf0]

[https_www.jianshu.com_p_c8b86b09daf0]: https://www.jianshu.com/p/c8b86b09daf0

发表评论取消回复

表情：

评论列表（有 0 条评论，323人围观）

还没有评论，来说两句吧...

相关阅读

相关 Javascript---BOM 防抖节流

函数防抖单位时间内，多次触发一个事件，以最后一次触发为准。防抖实现： 1.声明一个全部变量存储定时器ID。 2.每一次触发交互的时候，先清除上一次的定时器，然后

我会带着你远行/ 2024年04月08日 12:37/ 0 赞/ 56 阅读

相关防抖和节流

防抖是为了防止频繁触发的操作，在指定时间内我们让用户的行为只触发一次在第一次点击时/最后一次点击时（只能识别一次） function debounce(

约定不等于承诺〃/ 2023年01月08日 02:06/ 0 赞/ 141 阅读

相关 JavaScript 防抖、节流

浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要

Bertha 。/ 2022年12月20日 15:59/ 0 赞/ 153 阅读

相关 javascript 防抖、节流

一、防抖 > 防抖——触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间； 1. 原理短时间内多次触发同一事件

左手的ㄟ右手/ 2022年12月18日 15:56/ 0 赞/ 147 阅读

相关防抖和节流

防抖（debounce）:当持续触发事件时，保证只执行最后一次事件处理函数 > 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。如鼠标移动事件onmousemo

àì夳堔傛蜴生んèń/ 2022年11月05日 08:32/ 0 赞/ 196 阅读

相关防抖和节流

防抖所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。触发高频事件后n秒内函数只会执行一次，如果n秒

待我称王封你为后i/ 2022年08月30日 11:37/ 0 赞/ 210 阅读

相关防抖和节流

1. 防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 \ 思路：每次触发事件时都取消之前的延时调用方法 function

朱雀/ 2022年03月18日 01:44/ 0 赞/ 295 阅读

相关节流、防抖

节流和防抖主要处理事件处理函数高频调用，减少浏览器负担节流：尽量减少触发次数，mint-ui上封装了一个方法 <script> var t

向右看齐/ 2022年01月30日 00:39/ 0 赞/ 328 阅读

相关 JavaScript防抖和节流

防抖 1. 概念：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会触发。 > 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n

心已赠人/ 2021年09月19日 22:42/ 0 赞/ 324 阅读

相关防抖和节流

防抖和节流一、什么是防抖二、防抖使用场景 1.输入框是按键触发请求时三、什么是节流四、节流的使用场景 1.鼠标连续

快来打我*/ 2021年09月07日 06:13/ 0 赞/ 471 阅读