vue之延时刷新实例

Carnelian ·

更新时间:2024-09-21

· 919 次阅读

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

VUE

1024 个赞