JavaScript 如何做接口防抖

正文

你肯定遇到过这种情况：在电商网站的搜索框里，只要你输入一个字，页面就立刻弹出一堆结果，结果你只是不小心多敲了一下键盘，它就反复请求了三四次数据；或者在滚动页面找内容时，每划一下就跳一次加载动画，拖得页面半天动不了。这些看似是网站“反应太快”的情况，其实藏着一个很实用的前端优化技巧——接口防抖。

什么是接口防抖？

简单说，接口防抖就是“让请求慢半拍”，但不是真的让服务器等，而是把你频繁触发的请求“攒起来”，只等你停止操作一小段时间后，才发一次请求。就像你去便利店买东西，本来想快速挑完结账，结果总忍不住多看货架，收银员不会你每拿一样东西就扫一次码，而是等你挑完站定了，才统一扫码，这就是防抖的逻辑。

为什么需要做接口防抖？

为啥要多此一举呢？因为浏览器和服务器都扛不住“高频请求”。比如搜索框每输入一个字就发一次请求，要是你手快，一秒敲3个键，就会发3次请求，服务器要处理重复数据，还可能因为请求太多变慢；你的电脑也会因为频繁发请求，占用更多网络资源，页面甚至会卡顿。而用了防抖，不管你敲多少字，只要你停个500毫秒（大概半秒钟），才发一次请求，既省了资源，结果和高频发请求的一样，用户体验还更好。

JavaScript 怎么实现接口防抖？

用JavaScript做防抖，核心是“清除定时器”——每次触发事件（比如输入、滚动）时，先把之前设的定时器删掉，重新设一个新的，等你停了才触发请求。我们用搜索框的例子来写代码，保证你能看懂。

首先，找到页面上的搜索输入框，监听它的“输入”事件，就是用户每敲一个字就触发的事件。然后，准备一个“定时器变量”，用来存每次设的定时器编号，每次触发输入事件，就先判断这个变量里有没有旧的定时器，有的话就用clearTimeout把它删掉，相当于把之前的“扫码准备”取消。接着，设一个新的定时器，比如等500毫秒，到了就发请求，把搜索框里的内容传给服务器。

举个实际的小例子，假设搜索框的id是searchInput，代码大概是这样的：

`javascript

// 先拿搜索框元素

const searchInput = document.getElementById('searchInput');

// 定时器变量，初始是空

let timer = null;

// 监听输入事件

searchInput.addEventListener('input', function() {

// 每次触发，先清除之前的定时器

clearTimeout(timer);

// 设新定时器，500毫秒后发请求

timer = setTimeout(function() {

// 这里就是发请求的代码，比如用fetch

fetch(/api/search?keyword=${searchInput.value})

.then(res => res.json())

.then(data => console.log('搜索结果：', data));

}, 500);

});

`

你看，要是用户快速输入“手机”两个字，第一次输入“手”会设一个500毫秒的定时器，接着输入“机”时，会把之前的定时器删掉，再设一个等“机”输完的500毫秒定时器，最后只发一次请求，完美避免了多余请求。

注意几个小细节

别把防抖的“等待时间”设太短，比如设100毫秒，用户还没停就发了，和没防抖一样；也别太长，设2秒，用户换个词要等很久，会觉得反应慢。一般给500毫秒就合适，符合大家的操作习惯。另外，要是你用的是Vue、React这类框架，不用自己写定时器，它们的防抖工具（比如Lodash的debounce）更方便，不过核心原理还是刚才说的“清除定时器”。

现在再看之前的搜索框，输入时不再乱蹦结果，页面也不卡了，这就是接口防抖的作用——用简单的方法，解决了高频请求的大问题。