简单聊聊防抖 和 节流

169 阅读2分钟

首先什么是防抖它有什么作用

防抖 (Debouncing) 的含义是指在一定时间内,多次触发同一个事件,只执行最后一次操作。当我们在搜索框中输入关键词时,输入框会不断触发 oninput 事件,如果每次输入都去请求服务器获取数据,会造成不必要的请求浪费。此时就可以使用防抖技术,将一定时间内的多次触发合并为一次操作,只请求一次服务器数据,减少了请求次数和服务器负载。

在防抖函数中,我们使用了闭包来保存定时器变量 timer 和传入的函数 func。每次触发事件时,我们先清除之前的定时器,再设置一个新的定时器。如果在 delay 时间内再次触发事件,就会清除之前的定时器并设置一个新的定时器,直到 delay 时间内不再触发事件,定时器到达时间后执行传入的函数 func。

1ad5ad6eddc451da5315c31ea6f6ae6ed116327c.jpeg

节流 (Throttling) 的含义是指在一定时间内,多次触发同一个事件,只执行第一次操作。节流:使用场景:比如说要抢购商品

我们一般的话都是靠手速,而有一些人就会利用我们软件的漏洞,写脚本一秒点击抢购按钮10000次,那么这样来看,我们的服务器极大可能会处于崩溃的状态,一旦崩溃会给公司造成很大一个的损失,所以就产生了节流。节流的话:大白话来说就是:每隔一段时间触发一次。这样就可以防止有人利用脚本一秒点击10000次的情况。