节流与防抖函数

VIP文章向歌啊

于 2021-12-05 22:12:54 发布

阅读量620

点赞数 1

分类专栏： JavaScript及ES6 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_46186155/article/details/121736676

版权

节流或防抖

作用：限制函数执行的次数

1. 防抖

通过 setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发。

防抖函数我感觉可以理解为一个升降梯，在电梯门关闭之前，只要有人来，就重新等待相同间隔时间。

这里我们使用点击按钮来模拟防抖函数的作用

当用户点击提交按钮后，触发 debonce()函数

这里使用定时器箭头函数，使用 fn.apply()绑定 this，此时 this 指向按钮实例。
通过 arguments 传递剩余参数

<!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>
  </head>
  <body>
    <input type="text" />
    <input type

最低0.47元/天解锁文章

向歌啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节流与防抖函数

节流或防抖作用：限制函数执行的次数1. 防抖通过 setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发。防抖函数我感觉可以理解为一个升降梯，在电梯门关闭之前，只要有人来，就重新等待相同间隔时间。这里我们使用点击按钮来模拟防抖函数的作用当用户点击提交按钮后，触发 debonce()函数这里使用定时器箭头函数，使用 fn.apply()绑定 this，此时 this 指向按钮实例。通过 arguments 传递剩余参数<!DOCTYPE html>&lt
复制链接

扫一扫

专栏目录