专业编程基础技术教程

网站首页 > 基础教程 正文

实现根据输入框输入的内容动态的进行搜索效果

ccvgpt 2024-08-02 11:53:17 基础教程 9 ℃

我们有时候会遇到这样的需求,就是根据输入框输入的内容动态的搜索,

实现根据输入框输入的内容动态的进行搜索效果

一般可能就是 obj.onkeyup = function () { search ( 开始搜索了。。。。。) },

这样的操作会导致发送的搜索请求过多,严重影响性能

思路: 当用户向 输入框 输入 内容时 setTimeout(function() { 开始搜索。。。。。 } ,700);700毫秒大概是人输入时停顿的时间间隔。

如果写成 obj.onkeyup = function() {

setTimeout(function() {开始搜。。。。}, 700);

}

这样的写法是有问题的,因为这样和没写定时器是一样的,还会发送每个请求,只是每个请求隔 了700毫秒而已。

所以,思路: 定义一个定时器, 每次keyup时先做个判断,若是上次的定时器没有完成,那就清空定时器,然后再重启,直到上次的完成了重启的才可以用。

效果图:

代码如下:

Tags:

最近发表
标签列表