JS淘宝搜索框防抖策略

最新推荐文章于 2024-04-17 16:11:15 发布

VIP文章申申あ

最新推荐文章于 2024-04-17 16:11:15 发布

阅读量899

点赞数

分类专栏： Ajax 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43781887/article/details/126919818

版权

防抖的概念：防抖就是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

防抖的好处：防抖的好处在于不会频繁执行回调，能保证回调最终只被执行一次，能提高浏览器性能。

拿淘宝输入框案例为例，不想每次按下键盘都去发送JSONP请求，想要输入完毕之后最后只发送一次请求。也就是我们常说的输入框防抖。

输入框防抖的核心步骤有三个：

（1）定义一个防抖动的timer

（2）定义一个防抖的函数

（3）在触发keyup事件时立即清空timer

也就是当用户键盘弹起之后，这里相当于就是按下键盘后，先清楚定时器，然后开启一个定时器，这个定时器里面的代码是500ms之后才会执行，要是在这500ms之内用户又按下了键盘，那就会再清除定时器，再重新开启一个定时器，也就是如果快速按下三个字母，最后只会执行一次JSONP请求。

淘宝输入框防抖代码：

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale&

关注