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 面向对象技术基础教程
Mar 03 Javascript
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 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
You might like
php时间不正确的解决方法
2008/04/09 PHP
php Undefined index的问题
2009/06/01 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
js计算页面刷新的次数
2009/07/20 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
记一次django内存异常排查及解决方法
2020/08/07 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
学校募捐倡议书
2014/05/14 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
超市开店计划书
2014/09/15 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL