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之延时刷新实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
用Vue写一个分页器的示例代码
Apr 22 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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
You might like
多php服务器实现多session并发运行
2006/10/09 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python操作Word批量生成文章的方法
2015/07/28 Python
python读写配置文件操作示例
2019/07/03 Python
Python3 合并二叉树的实现
2019/09/30 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
婚礼新郎父母答谢词
2014/01/16 职场文书
教师绩效考核方案
2014/01/21 职场文书
感恩的演讲稿
2014/05/06 职场文书
骨干教师培训方案
2014/05/06 职场文书
学校欢迎标语
2014/06/18 职场文书
清洁工个人总结
2015/03/04 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
大学生见习总结报告
2015/06/24 职场文书