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

开发 前端
防抖函数,就是防止抖动,避免事件重复触发。比如监听输入框的输入,不应该在用户每输入一个字符就触发监听,而是在用户输入结束后再来监听。

防抖

防抖函数,就是防止抖动,避免事件重复触发。比如监听输入框的输入,不应该在用户每输入一个字符就触发监听,而是在用户输入结束后再来监听。

流程为:1、事件触发;2、开启定时器;3、当事件再次触发的时候,就会清除上个定时器,然后重新开启新的定时器;4、时间到了以后,就开始处理事件操作。

现在有一个输入框,代码如下:

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

效果如下图:

图片图片

每输入一个字符,就触发监听事件。如果是搜索查询的话,那就不合适了。

现在在监听事件上设置防抖:

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);
  };
}

如果在定时器时间内,事件再次触发,那么就清空之前的定时器,然后重新开启新的定时器。

效果图:

图片图片

这就是防抖。

节流

节流就是控制事件触发的频率。比如按钮点击,在短时间内多次点击,那么只需要触发一次即可。

比如:

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

连续点击多次,效果如下图,如果是涉及到网络请求的话,那么得不偿失了。

图片图片

现在定义一下节流函数:

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

完整代码:

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);
  }
}

在一秒内连续点击多次,最后只有一次有效。图片

责任编辑:武晓燕 来源: 读心悦
相关推荐

2021-08-03 06:57:36

Js事件节流

2022-02-22 08:29:59

Vue前端防抖

2024-03-08 08:26:20

防抖节流delay​

2024-10-12 09:33:24

消息队列多线程并行编程

2023-12-21 08:51:37

防抖节流Vue.js

2021-11-19 09:01:09

防抖节流前端

2022-04-01 07:52:42

JavaScript防抖节流

2022-05-15 22:08:58

ReactHookdebounce

2024-06-14 09:30:58

2024-05-28 09:26:46

2021-12-09 10:57:19

防抖函数 Debounce

2016-06-30 10:24:47

JavaScript节流Throttle

2021-12-13 07:50:14

前端性能优化

2024-08-29 15:26:21

2017-04-25 16:20:10

页面优化滚动优化

2011-09-29 09:50:44

JavaScript

2021-12-16 10:08:34

文件字节流FileInputStFileOutputS

2024-08-05 09:29:00

前端接口请求

2015-09-16 14:56:02

魅族

2015-09-17 18:44:40

魅族
点赞
收藏

51CTO技术栈公众号