情景描述:常见的搜索输入框都有联想功能,如果不加上防抖功能,它们会在用户不断输入搜索条件过程中重复发送请求,这样会浪费不必要的性能。比较合理的是在用户停止输入的间隙发送请求,这样大大减少了请求次数,同时页面也不会不停加载数据。
如果不加入防抖技术,就会出现下面这种情况:
当在搜索框中每输入一个字母 就会发送一次请求,这非常不合理。
要解决这个问题,就要用到防抖技术。
代码示例如下:
首先声明一个全局的变量TimeID,然后在发送请求之前添加一个定时器,延时1秒钟执行。
clearTimeout(this.TimeID);
this.TimeID = setTimeout(() => {
//4.准备发送请求获取数据
this.getRequestData(value);
}, 1000);
添加防抖技术后的页面效果:
这样就可以实现在用户输入完成后发送一次请求查询数据。