前端性能优化-input输入框联想匹配请求数据防抖思想详解 雨点打透心脏的1/2处 2022-02-17 12:46 640阅读 1赞 当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方法
还没有评论，来说两句吧...