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 相关文章推荐
JS实现随机化快速排序的实例代码
Aug 01 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
node.js基础知识汇总
Aug 25 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
javascript 写类方式之四
2009/07/05 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
JS作用域深度解析
2016/12/29 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
深入浅析Vue中的Prop
2018/06/10 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python的else子句使用指南
2016/02/27 Python
Python如何快速实现分布式任务
2017/07/06 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python贪心算法实例小结
2018/04/22 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
详解Python self 参数
2019/08/30 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
浅析Python __name__ 是什么
2020/07/07 Python
python操作toml文件的示例代码
2020/11/27 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
中年人生感言
2014/02/04 职场文书
节能减排倡议书
2014/04/15 职场文书
大学生求职计划书
2014/04/30 职场文书
成事在人观后感
2015/06/16 职场文书
教师培训学习心得体会
2016/01/21 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js