如何利用JS防抖实现搜索框优化

什么是JS的防抖？
防抖指的是触发事件后在n秒内函数只执行一次，若在n秒内再次触发事件则重新计算，函数不会重复执行。
在实际项目中我们可能会碰到搜索框会浪费大量的请求。比如我们有一个input，每次用户在搜索框输入的时候就触发onInput事件然后发送请求。
以下代码是未优化前

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="text" id="input" /></body><script>let input = document.getElementById("input");let num = 1;function sendRequest() {console.log(num++);}input.oninput=sendRequest;</script>
</html>

优化后

  let input = document.getElementById("input");let num = 1;function sendRequest() {console.log(num++);}// 我们想让用户输入完毕后过1s后再查询// 所以我们使用防抖,设置一个定时器，传入要执行的函数，延时的时间function debounce(fn, wait) {let timeout;return function () {if (timeout) clearTimeout(timeout);timeout = setTimeout(function () {fn.apply(this);}, wait);};}input.oninput = debounce(sendRequest, 2000);

如何利用JS防抖实现搜索框优化相关推荐

html怎么创百度搜索框,JS实现百度搜索框
本文实例为大家分享了JS实现百度搜索框的具体代码,供大家参考,具体内容如下实现原理向输入框动态输入时关键词,将当前关键词作为问号参数后面的值,因为要跨域使用百度的接口,所以通过 JSONP 跨域创 ...
java搜索页面历史记录,使用JS location实现搜索框历史记录功能
首先,来看下效果图(样式什么的就不必吐槽了哈) html代码搜索记录: //用于保存记录信息 css代码 * { margin: 0; padding: 0; } input { border: 0 ...
html+js仿百度搜索框，点击和回车跳转百度搜索
html+js仿百度搜索框,点击和回车跳转百度搜索代码 <!DOCTYPE html> <html lang="en"> <head>< ...
html+css+js按键定位搜索框
今日练习:js监听键盘事件,按下s键,即跳到搜索框,光标定位到搜索框里面. <!DOCTYPE html> <html lang="en"> <hea ...
vue实现搜索框搜索新增_基于Vue.js实现简单搜索框
主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果这里有两个组件,一个组件是logo ...
JS模拟百度搜索框和选项卡
练习1 实现搜索框内,输入相关数字,在下方显示相关内容,模拟百度搜索,详细代码如下: <!DOCTYPE html> <html lang="en">< ...
JS模拟京东搜索框案例模拟京东快递单号查询案例
模拟京东搜索框案例 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
Js实现百度搜索框提示功能（利用百度接口）
这个功能的实现主要使用了jsonp跨域访问, 然后通过回调函数来将搜索到的关联内容显示出来 . JSONP(JSONwith Padding)是一个非官方的协议,它允许在服务器端集成Script ta ...
vue实现搜索框记录搜索历史_使用JS location实现搜索框历史记录功能_苏颜_前端开发者...
首先,来看下效果图(样式什么的就不必吐槽了哈) 搜索记录: //用于保存记录信息 * { margin: 0; padding: 0; } input { border: 0; vertical-al ...

如何利用JS防抖实现搜索框优化

如何利用JS防抖实现搜索框优化相关推荐

最新文章

热门文章