目录
一、防抖:多次触发,只执行最后一次
防抖策略(debounce),当事件被触发后延迟给定时间后才被执行,如果在给定的这段时间内,事件被再次触发,将重新计时,及销毁原来的计时器。
运用:高频触发的事件,在给定的时间内,只执行最后一次。
例如:在搜索框中输入内容,在用户停止输入后的零点几秒后搜索框下方显示用户输入内容的相关词汇或标题,如果在这零点几秒内,用户还在输入,则下方的相关信息发生不会改变。
亦或者是用户频繁多次的点击登录或发送验证码按钮,导致客户端多次向服务器端发送请求,导致系统出现宕机、卡死现象,此时就需要防抖。
防抖实现思路:
函数表达
<body>
<input type="text" id="inp">
<script>
// 1.封装防抖函数 **防抖重在清零 clearTimeout(timer)**
function debounce(fn, time) {
// 4.创建一个标记用来存放定时器的返回值
let timeout = null;
return function () {
// 5.每当用户触发input事件 把前一个 setTimeout 清楚掉
clearTimeout(timeout);
// 6.然后又创建一个新的