编程 Javascript

vue之延时刷新实例

Posted in Javascript onNovember 14, 2019

当我们要做一个实时搜索时，用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之延时刷新实例

- Author -

兮川

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

网站如何做到完全不需要jQuery也可以满足简单需求

Jun 27 Javascript

javascript中的变量作用域以及变量提升详细介绍

Oct 24 Javascript

用js通过url传参把数据从一个页面传到另一个页面

Sep 01 Javascript

jQuery源码解读之removeAttr()方法分析

Feb 20 Javascript

jQuery实现平滑滚动到指定锚点的方法

Mar 20 Javascript

Javascript进制转换实例分析

May 14 Javascript

JS产生随机数的几个用法详解

Jun 22 Javascript

浅谈JSON.stringify()和JOSN.parse()方法的不同

Aug 29 Javascript

angularjs ui-router中路由的二级嵌套

Mar 10 Javascript

使用JavaScript保存文本文件到本地的两种方法

Jan 22 Javascript

解决vue自定义全局消息框组件问题

Nov 22 Javascript

Js实现粘贴上传图片的原理及示例

Dec 09 Javascript

浅谈Vue.js之初始化el以及数据的绑定说明

Nov 14 #Javascript

vue自定义正在加载动画的例子

Nov 14 #Javascript

如何在wxml中直接写js代码(wxs)

Nov 14 #Javascript

微信小程序云开发获取文件夹下所有文件(推荐)

Nov 14 #Javascript

Vue SPA 初次进入加载动画实现代码

Nov 14 #Javascript

构建大型 Vue.js 项目的10条建议(小结)

Nov 14 #Javascript

vue实现修改图片后实时更新

Nov 14 #Javascript