前端性能优化-input输入框联想匹配请求数据防抖思想详解

最新推荐文章于 2025-05-12 07:29:18 发布

原创最新推荐文章于 2025-05-12 07:29:18 发布 · 1.4w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#input联想输入防抖 #前端优化 #javascript #js

javascript插件专栏收录该内容

13 篇文章

订阅专栏

博客指出input输入框联想匹配时，仅用监听事件做请求会导致页面数据抖动、用户体验差且消耗性能。介绍了简单案例，展示频繁请求问题。提出解决方案，利用timeout延时器取最后一次输入，减少请求频率，并对相关代码进行了解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当input输入框联想匹配的时候，你如果只写了对应监听事件去做请求，会发现每输入一个字符，页面的数据替换也是迅速的替代，因为数据替换较快，所以还带有抖动的效果，页面数据虽然实时跟新，但是用户体验却非常不好，而且频繁请求，消耗性能。

其实多数前端也是对这个不在意，认为功能出来了，实时能展现对应匹配的数据就好了，然而却忽略了用户体验。

下面来讲解一下简单的案例：

1.我们首先，随便写一个简单的input keyup事件

<body>
  <input onkeyup="names()">
</body>

2.接着对应的js文本

function names(){
    console.log(document.getElementsByTagName('input')[0].value) 
       //...对应的ajax请求...
}

预览时会发现很明显，当键盘每抬起一次，names（）就会执行一次，console和对应得请求就会相应的执行一次，那么你请求的数据频率这么高又怎么会不抖动呢？？

解决方案：

主要思想就是想办法永远取最后一次的input的输入，可以利用timeout延时器，每次只要输入字符的间隔时间小于设置的延时时间，也就是下次的输入检测到延时器不是空的，就清除延时器。

这样一来，只要停止输入的时间间隔超过设置的延时器时间，延时器内的程序才会执行，就能保证只剩下最后一次输入的延时器，从而减少请求频率。

1.html代码

<body>
  <input onkeyup="deb()">
</body>

2.js代码

 function names(){
     console.log(document.getElementsByTagName('input')[0].value)
 }
 function debounce(fn, time) {
     var timer = null;//定义一个延时器名称
     return function() {
         if (timer){//如果存在延时器就清除
              clearTimeout(timer);
         } 
         timer = setTimeout(() => fn.apply(this, Array.prototype.slice.call(arguments, 0)), time);
//如果输入间隔在time时间内的，在之前都会进行清除操作，永远保证只执行了最后一个延时器
     }
 }
 let deb = debounce(names,500);//赋值是为了定义空延时器只执行一次，如果事件直接调用debounce，会导致每次timer都为null

ps:代码讲解

fn.apply(this, Array.prototype.slice.call(arguments, 0))

fn就是传过来的监听事件，

利用apply，把fn的监听事件继承给this（函数内部指向函数），因为apply，接收的参数是数组类型，

因此使用Array.prototype.slice.call(arguments, 0)把参数改为数组相当于 arguments.slice(0)，

由于arguments本身是是object类型，因此不存在slice等方法,

所以我们利用Array.prototype.slice.call，使arguments继承了array的slice方法