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

雨点打透心脏的1/2处 2022-02-17 12:46 675阅读 1赞

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

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

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

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

2.接着对应的js文本

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

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

解决方案：

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

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

1.html代码

2.js代码

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方法

还没有评论，来说两句吧...