微客导航 » 文章资讯 » vue输入节流,避免实时请求接口的实例代码

vue输入节流,避免实时请求接口的实例代码

2023-08-10 03:10:06 212

在做搜索的时候，当搜索页面只有一个输入框、没有确定按钮的时候，只能在用户输入时请求服务端，查询数据。这样会导致频繁的发送请求，造成服务端压力。

解决这个问题，可以使用vue做输入节流。

1、创建一个工具类，debounce.js

/***
*@paramfunc输入完成的回调函数
*@paramdelay延迟时间
*/
exportfunctiondebounce(func,delay){
lettimer
return(...args)=>{
if(timer){
clearTimeout(timer)
}
timer=setTimeout(()=>{
func.apply(this,args)
},delay)
}
}

2、在搜索页面使用







.text-input{
display:block;
width:100%;
height:44px;
border:1pxsolid#d5d8df;
}

以上这篇vue输入节流,避免实时请求接口的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue输入节流,避免实时请求接口的实例代码

热门推荐

随机推荐