vue之延时刷新实例
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
今天长沙网络推广就为大家分享一篇vue之延时刷新实例，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
当我们要做一个实时搜索时，用watch监控数据，当数据不断变化时，不可能立刻进行接口的请求，这样会给服务器带来麻烦，使服务器负载加重，此时就需要一个延时加载机制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xichuan</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css" rel="external nofollow" />
<<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>
</head>
<body>
<div id="test">
<el-input id="inputSearch" placeholder="输入关键字搜索" suffix-icon="el-icon-search" size="mini" v-model="search"></el-input>
{{show}}
</div>
</body>
<script>
new Vue({
el: '#test',
data: {
search:'',
show:'',
timer: null,
},
watch:{
search:function(val, oldVal){
//当不断输入字符时，因为延时执行还没有开始，就被清除，然后重新生成新的延时器
//虽然不停的清除，生成新的延时器，但在输入的时候延时器内部的方法都一直没有被执行
clearTimeout(this.timer); //清除延迟执行
this.timer = setTimeout(()=>{ //设置延迟执行
console.log('search:'+val+','+oldVal);
this.show = this.search;
},1000);
}
}
});
</script>
<style>
#inputSearch{
width: 200px;
left: 20px
}
</style>
</html>
以上这篇vue之延时刷新实例就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。