vue 之 延时刷新

已于 2022-11-08 13:00:43 修改
阅读量1.1w 收藏 5
点赞数 2
分类专栏： 前端 文章标签： Vue延时刷新
于 2019-01-10 15:33:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zc_ad/article/details/86235227
版权

当我们要做一个实时搜索时，用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"/>
    <<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({
最低0.47元/天 解锁文章
兮川
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue之延时刷新实例
10-15
今天小编就为大家分享一篇vue之延时刷新实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解VUE的状态控制与延时加载刷新
08-31
接下来，我们将重点讲解如何实现状态驱动的延时刷新。Vue的混入（mixin）机制在这里发挥了关键作用。混入允许我们将一组通用的方法或选项应用于多个组件，避免代码重复。在上面的示例中，我们定义了一个名为`...
vue延时函数_「vue源码」「nextTick」原理以及源码解析
weixin_39603050的博客
12-12 376
nextTick Vue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，nextTick 是 Vue 的一个核心实现，在介绍 Vue 的 nextTick 之前，为了方便大家理解，我先简单介绍一下 JS 的运行机制。JS 运行机制JS 执行是单线程的，它是基于事件循环的。事件循环大致分为以下几个步骤：(1)所有同步任务...
vue---Promise和setTimeout实现sleep函数
最新发布
bidepanm的博客
05-16 506
这个函数接受一个毫秒数，返回一个Promise对象。调用这个函数后，会等待传入的时间（即休眠）后，Promise对象会被resolve。可以用await关键字等待Promise解决（即休眠完成），然后再执行下一步操作。上述代码会输出 start，然后等待1秒钟后才输出 end。
vue里面使用setTimeout（延时器）代码演示加效果
qq_54030660的博客
11-15 6180
vue里面使用setTimeout（延时器）代码演示加效果
Vue延时函数setTimeout
wa123579的博客
05-08 1万+
单位是毫秒 setTimeout(() => { //代码 }, 1000);
在Vue开发中如何延迟几秒钟运行指定函数?
Heby的博客
07-29 1万+
有两种方法,一种是JavaScript的setTimeOut方法,一种是this.$nextTick(function(){})方法。两种的区别是setTimeOut可以设置时间后再进行渲染，this.$nextTick(function(){})可以在vue组件自动渲染后调用。 setTimeOut //在3000毫秒后跳出弹窗‘‘对不起, 要你久候’’ setTimeout("alert('对不起, 要你久候')", 3000 ) this.$nextTick(functio...
Vue变量更新卡顿，延迟
weixin_44506660的博客
06-08 574
通过方法在改变值，这个值需要在页面中展示。但是这个值在页面上没有更新，或者有延迟。$使用$set('数据存放的位置'，’数据具体存放的变量名‘,'数据的值')这个一般发生在多层次的state结构中。$forceupdate（）强制刷新。
vue中实现每隔一秒钟刷新当前页面（附清除定时器）
m0_62823653的博客
06-08 7117
第一部分：在html页面解决方案 解决方法如下： 第二部分：在vue中的解决方
VUE中setTimeout和setInterval自动销毁案例
10-14
在Vue.js应用中，我们经常会遇到使用`setTimeout`和`setInterval`来实现某些延时或周期性操作。然而，如果不正确地管理这些定时器，它们可能会在组件被销毁后仍然继续运行，导致不必要的资源消耗和潜在的问题。本文...
js vue中得延时器_vue之延时刷新实例
weixin_39915605的博客
12-22 1672
当我们要做一个实时搜索时，用watch监控数据，当数据不断变化时，不可能立刻进行接口的请求，这样会给服务器带来麻烦，使服务器负载加重，此时就需要一个延时加载机制。xichuan<{{show}}new Vue({el: '#test',data: {search:'',show:'',timer: null,},watch:{search:function(val, oldVal){//当不...
Vue延迟方法 类似sleep
rayding的博客
12-20 4366
vue新写了一个“一键下载”doc的方法， 发现下载过程中参数已经传输到后台，但是下载队列总是缺少， 猜测是因为下载队列并发执行导致，经过搜索发现@测试狂人er 的博客里写了一个vue延迟方法，类似sleep。 1.//延迟的方法 sleep1(numberMillis){ var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime(
vue延迟加载
csdndd521的博客
06-13 2236
setTimeOut
vue中使用async和await要求让整个项目暂停5秒怎么实现
qq_53818683的博客
04-19 1611
3.注意，这种做法会阻塞整个应用程序的执行，因此不建议在实际生产环境中使用。如果您需要在应用程序中等待长时间的操作完成，最好使用异步代码和回调函数，以便其他部分的应用程序可以继续运行。2.在需要暂停执行的地方调用该函数。1.创建一个异步函数来模拟需要等待 5 秒的操作，并在其中使用。例如，可以创建一个名为。
vue延时执行函数
1281024的博客
05-10 672
我为element-ui的按钮设置了点击后的样式，但是不能点击后生效，发现是因为点击按钮后调用的请求函数是异步的，调用函数查询时，查询到的数据是还没有修改的数据（即查询函数调用的太快了，修改的数据还没有生效），故需要进行延时查询数据。我要获取orderId的数据，由这个数据决定按钮的样式，而我的按钮操作会修改数据库里的这个数据，然后再次进行查询数据渲染。一定要创建一个timer，然后调用延时之前先清除timer的延时。进行延时调用方法，即可查出修改后的数据。
Vue的状态控制与延时刷新
weixin_34315189的博客
08-19 965
在实际项目中，我们经常会遇到这种状况，某些数据我们希望等到需要的时候再去获取，或者某些数据我们需要刷新，但是不必立刻刷新，而是延时到展示的时候再去刷新。 在DOM操作的年代，想要实现这样的功能可能会稍微麻烦一些，然而当我们使用数据驱动的mv*框架的时候，这个想要实现这个需求就容易了许多。 当我们理解数据驱动时，我们很容易想到将需要...
使用Vue做一个定时刷新的页面
InterestAndFun的博客
09-13 2773
使用Vue做一个定时刷新的页面 前置知识 1. setInterval 官方上的定义： setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。 在窗口和工作接口上提供的**setInterval()方法重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。它返回一个时间间隔ID，该ID唯一地标识时间间隔，因此您可以稍后通过调用clearInterval()**来删除它。 区别于**setTimeOut**: **setTimeout()**方法设置一个定时器
开发vue延迟加载组件
热门推荐
z470259742的博客
03-16 1万+
vue的单页面应用访问速度一般情况下已经很快了，不过对于比较复杂的页面首次打开的时候会很慢，慢的原因呢主要涉及如下两个方面：1、dom元素较多，首次打开时需要进行太多的渲染和判断，而这些渲染和判断大多数往往都不是首次打开页面时需要消耗的。2、多数首次不显示的的dom元素，或者子组件加载时会调用ajax请求加载数据，这时候首次加载的请求可能有5个、10个甚至更多，这时候并发请求就会带来竞争，首次加载...
vue的延时加载播放器
12-21
Vue的延时加载播放器是一种可以在页面加载时延迟加载视频播放器的技术。它通常用于优化页面性能和用户体验，通过延迟加载视频播放器，可以减少初始页面加载时间，提高页面加载速度，同时减少对用户流量的消耗。 在Vue中实现延时加载播放器，通常可以使用以下步骤： 1. 创建一个Vue组件，用于封装视频播放器的相关逻辑。 2. 在组件的data属性中定义一个变量，用于控制视频播放器的加载状态。初始时，该变量应该设置为false，表示视频播放器尚未加载。 3. 在组件的mounted钩子函数中，使用Ajax或其他异步请求技术从服务器或其他数据源获取视频播放器的相关信息，并将其存储在组件的data属性中。 4. 在组件的template中，使用v-if指令根据视频播放器的加载状态显示或隐藏相关元素。例如，当视频播放器的加载状态为false时，可以显示一个加载指示器或空白区域；当视频播放器的加载状态为true时，可以显示视频播放器的容器元素。 5. 在组件的方法中，可以使用异步请求返回的视频播放器相关信息，创建并配置视频播放器对象，然后调用相应的播放方法。在视频播放器对象创建和配置完成后，可以将视频播放器的引用存储在组件的data属性中，以便在template中使用v-if指令进行控制。 6. 在组件的watch属性中，监听数据源的变化，并在数据变化时重新加载视频播放器对象。这样可以在数据源发生变化时及时更新视频播放器，避免页面加载速度的降低。 通过以上步骤，可以在Vue中实现延时加载播放器。需要注意的是，延时加载播放器需要结合其他技术手段，如懒加载、预加载等，以提高页面性能和用户体验。同时，还需要考虑视频播放器的兼容性和性能优化等问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值