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 setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
微信小程序实现页面浮动导航
Jan 28 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
JS验证不重复验证码
2017/02/10 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python自定义简单图轴简单实例
2018/01/08 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
python读写csv文件实例代码
2019/07/05 Python
Python 读取位于包中的数据文件
2020/08/07 Python
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
财务主管的岗位职责
2013/12/30 职场文书
大班亲子运动会方案
2014/06/10 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
python实现会员管理系统
2022/03/18 Python