js节流与防抖的概念、区别、适用场景、实现与封装

最新推荐文章于 2023-09-04 17:19:53 发布

早起的小笨鸡

最新推荐文章于 2023-09-04 17:19:53 发布

阅读量700

点赞数

分类专栏： js 文章标签： js vue javascript

本文链接：https://blog.csdn.net/weixin_47783830/article/details/115299485

版权

首先了解他们的概念、区别、适用场景，后面有代码

概念：

防抖（debounce）：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。****

区别：

防抖：在特定时间内，只要重新触发事件，就会重新计算时间，而在这个时间内只会执行最后一次。
也就是说，你只要一直触发这个事件，他就不会执行，停止后才会执行
节流：特定时间内，无论你出发多少次，在这段时间内，一定会有且仅有一次真正的事件触发

适用场景

防抖：表单提交

节流：页面滚动加载

代码及介绍：

新建一个dome，创建一个点击事件
blog.csdnimg.cn/2021032914223062.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Nzc4MzgzMA==,size_16,color_FFFFFF,t_70)

在这里插入图片描述
代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="data:image/ico;base64,aWNv">
</head>

<body>
    <div id='box'>
        <button id="btn">
        添加
        </button>
    </div>

最低0.47元/天解锁文章

早起的小笨鸡

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
js节流与防抖的概念、区别、适用场景、实现与封装

首先了解他们的概念、区别、适用场景，后面有代码概念：防抖（debounce）：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。****区别：防抖：在特定时间内，只要重新触发事件，就会重新计算时间，而在这个时间内只会执行最后一次。也就是说，你只要一直触发这个事件，他就不会执行，停止后才会执行节流：特定时间内，无论你出发多少次，在这段时间内，一定会有且仅有一次真正的
复制链接

扫一扫