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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
jQuery中Ajax的load方法详解
2015/01/14 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Python实现数值积分方式
2019/11/20 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
蓝颜请假条
2014/04/11 职场文书
119消防日活动总结
2014/08/29 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL