vue之延时刷新实例

时间：2021-05-26

当我们要做一个实时搜索时，用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之延时刷新实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章