JavaScript：简单理解防抖和节流，如何定义防抖和节流函数

防抖

防抖函数，就是防止抖动，避免事件重复触发。比如监听输入框的输入，不应该在用户每输入一个字符就触发监听，而是在用户输入结束后再来监听。Aw928资讯网——每日最新资讯28at.com

流程为：1、事件触发；2、开启定时器；3、当事件再次触发的时候，就会清除上个定时器，然后重新开启新的定时器；4、时间到了以后，就开始处理事件操作。Aw928资讯网——每日最新资讯28at.com

现在有一个输入框，代码如下：Aw928资讯网——每日最新资讯28at.com

import React from "react";const Child2 = () => {  return <input onChange={({ target: { value } }) => {    console.log(value)  }} />};

效果如下图：Aw928资讯网——每日最新资讯28at.com

图片Aw928资讯网——每日最新资讯28at.com

每输入一个字符，就触发监听事件。如果是搜索查询的话，那就不合适了。Aw928资讯网——每日最新资讯28at.com

现在在监听事件上设置防抖：Aw928资讯网——每日最新资讯28at.com

import React from "react";const Child2 = () => {  const inputChange = debounce(({ target: { value } }) => {    console.log(value)  })  return <input onChange={inputChange} />};function debounce(fn) {  let timeout = null;  return function () {    clearTimeout(timeout);    timeout = setTimeout(() => {      fn.apply(this, arguments);    }, 1000);  };}

如果在定时器时间内，事件再次触发，那么就清空之前的定时器，然后重新开启新的定时器。Aw928资讯网——每日最新资讯28at.com

效果图：Aw928资讯网——每日最新资讯28at.com

图片Aw928资讯网——每日最新资讯28at.com

这就是防抖。Aw928资讯网——每日最新资讯28at.com

节流

节流就是控制事件触发的频率。比如按钮点击，在短时间内多次点击，那么只需要触发一次即可。Aw928资讯网——每日最新资讯28at.com

比如：Aw928资讯网——每日最新资讯28at.com

import React from "react";const Child2 = () => {  return <button onClick={() => {    console.log("点击")  }}>点击</button>};

连续点击多次，效果如下图，如果是涉及到网络请求的话，那么得不偿失了。Aw928资讯网——每日最新资讯28at.com

图片Aw928资讯网——每日最新资讯28at.com

现在定义一下节流函数：Aw928资讯网——每日最新资讯28at.com

// 节流function throttle(fn) {  let timeout = null;  return function () {    if (timeout) return;    timeout = setTimeout(() => {      fn.apply(this, arguments);      timeout = null;    }, 1000);  }}

完整代码：Aw928资讯网——每日最新资讯28at.com

import React from "react";const Child2 = () => {  const click = throttle(() => {    console.log("点击")  })  return <button onClick={click}>点击</button>};// 节流function throttle(fn) {  let timeout = null;  return function () {    if (timeout) return;    timeout = setTimeout(() => {      fn.apply(this, arguments);      timeout = null;    }, 1000);  }}

在一秒内连续点击多次，最后只有一次有效。Aw928资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-48365-0.htmlJavaScript：简单理解防抖和节流，如何定义防抖和节流函数

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 图解系统设计之Instagram

下一篇： 14个工具，让 DevOps 和 SRE 遥遥领先！