Vue中使用setTimeout

最新推荐文章于 2023-12-14 17:00:19 发布
最新推荐文章于 2023-12-14 17:00:19 发布
阅读量1.4k 收藏 1
点赞数 1
文章标签： vue学习 setTimeou't学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42017905/article/details/100320919
版权

今天使用setTimeout 来修改一个变量的值以实现提示框的自动消失。
在这里插入图片描述
先是这样写，结果发现函数被调用了，但是不是在3秒后。
在这里插入图片描述
然后呢，我给加了引号，确实是3秒后触发了，但是
在这里插入图片描述
好像是指向有些不对，查了一些资料后成功实现目标，
用以下两种格式写都可以成功调用自己写的方法
在这里插入图片描述
在这里插入图片描述
新手学习笔记，有错请大佬指点。

<s>LoCloudy</s>
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用 setTimeout() setInterval()函数的问题
10-18
主要介绍了Vue中使用 setTimeout() setInterval()函数的问题 ,需要的朋友可以参考下
vue 定时器 setTimeout 的使用
java初识者
08-25 3万+
1、最简单的用法，500毫秒后执行，执行结束，定时器自动清除。 setTimeout(function() { // 需要执行的代码 }, 500); // 定时时间 2、循环执行定时器 data() { return { // 定时器 monitorUser: "", // 接收定时器id，便于清除定时器 } }, onHide() { // 清除定时器 clearTimeout(that.monitorUser); }, onShow() {
vue中setTimeout的使用
youshuang1207的博客
07-07 570
setTimeout在vue中的正确使用
热门推荐
大唐锦绣的博客
10-25 13万+
笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏，使用到setTimeout函数。遇到了1个坑: 在vue的某个方法(点击后执行) setTimeout(this.end(),4000);//娃娃消失 这里奇怪的是,end方法的确被执行了。但是没有执行4s后执行的效果。那我要你合用呢！其实，问题还是出在笔者身上，大家请看下图 setTimeout的定义和用法。问题出...
vue中使用定时器setTimeout
qq_37642495的博客
04-29 2169
今天有一个需求就是页面需要几秒中调一次请求，自然用setTimeout，然后就发现有一个Bug，明明设置的是5秒，可是页面却一直刷新，根本不是5秒，后来感觉是因为没有清除定时器，修改之后，发现是这样的，应该在VUE销毁前的钩子里面清除定时器： 这里附上一点点代码： 注意定时器都是有返回值的，这里推荐一个讲的很详细的定时器设置及其清除的链接：http://www.cnblogs.com/wangy...
VUE中setTimeout和setInterval自动销毁案例
10-14
补充知识：在Vue中使用`setTimeout`时，如果页面未通过刷新而是仅通过路由切换，定时器不会自动清除。这是因为路由切换并不会终止JavaScript执行，只有页面卸载或刷新才会清除定时器。例如： ```javascript data() ...
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
11-20
当我们在Vue组件的`methods`中使用`setTimeout`时，如果不手动清理，即使用户离开了当前路由，定时器依然会继续执行。例如： ```javascript data () { return { ct: null } }, methods: { start() { this.ct =...
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
10-15
总的来说，当在Vue中使用setTimeout进行动画效果处理时，需要确保时间间隔足够让Vue完成每一步的DOM更新。通过合理设置延时并理解Vue的生命周期，可以避免此类问题，保证动画效果的稳定性和用户体验。
vue settimeout 实例_分享：vue使用技巧和项目中遇到的问题
weixin_31706903的博客
02-03 292
这里给大家分享一下vue中的一些技巧，希望对大家有用处。(话不多说上代码)1，vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开，没有保存已输入的信息。)//在路由组件中：mounted(){},beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存表单，或者自动后台为其保存 }else{ next(true);/...
vue setTimeout--延迟操作
weixin_30696427的博客
09-13 1102
有时候我们在查询后要做某些事情，例如我查询的时候要根据某个值再去查询某些东西并和这些值一起显示的时候，我们可以对渲染数据的操作进行延迟，因为代码执行的速度是很快的而访问数据的操作相对于渲染的速度慢得多，所以往往数据还没查询到而数据就渲染完成了 setTimeout(() =>{ 要延迟的代码 },延迟时间); 转载于:https://www.cnblogs.com/xil...
vue项目开发中setTimeout等定时器的管理问题
12-11
一、问题来源。 在项目中，我们经常有这样的需求，一个页面初始化后，需要不断的去请求后端，来获取当前某个记录的最新状态。 显然，这个可以用setTimeout以及回调中继续setTimeout来实现。 我们假设定时器是在页面#/test/aaa上创建的。 但是，会遇到以下两个问题，我从#/test/aaa   这个页面切换到  #/test/bbb页面后如果停留在#/test/bbb，定时器还在跑。 其次，如果我不断在#/test/aaa 和 #/test/bbb两个页面之间不断的切换，而且切换时间小于定时器的间隔时间时，也会出现 重复创建setTimeout的情况。 现在的问题就是，我们如何做
vue中的setTimeout和setInterval
qq_32538087的博客
06-06 933
在vue中setTimeout和setInterval下的console和alert可以执行但是和this有关的不能执行 console两个this的结果（按顺序） 可以看出两个this的指向不同,因为setTimeout和setInterval这两个函数是window对象的函数 可以在内部定义一个变量暂存this，再使用。 ...
vue settimeout 实例_「vue源码」「nextTick」原理以及源码解析
weixin_36307086的博客
01-29 174
nextTick Vue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，nextTick 是 Vue 的一个核心实现，在介绍 Vue 的 nextTick 之前，为了方便大家理解，我先简单介绍一下 JS 的运行机制。JS 运行机制JS 执行是单线程的，它是基于事件循环的。事件循环大致分为以下几个步骤：(1)所有同步任务...
vue定时器的写法和setTimeout和setInterval的区别
zouyang920的博客
08-31 2359
0、前言介绍 setTimeout和setInterval都属于JS中的定时器，可以规定延迟时间再执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了，而setInterval则可以一直循环下去。 function fun(){ alert('hello'); } setTimeout(fun,1000);//参数是函数名 setTimeout('fun()',1000);//参数是字符串 setInterval(fun,1000); setInterval(
vue2.x实现简单banner的setTimeout自动切换
wzp20092009的博客
07-19 477
完整代码如下： BannerList.vue文件 <template> <div class="banner"> <ul class="banner-list"> <template v-for="(item,index) in bannerList"> <BannerLi v-bind:key="index" v-bin...
在vue中如何实现准时的setTimeout
MYuanFang的博客
12-14 1156
当每一次定时器执行时后，都去获取系统的时间来进行修正，虽然每次运行可能会有误差，但是通过系统时间对每次运行的修复，能够让后面每一次时间都得到一个补偿。通过系统的时间补偿，能够让我们的 setTimeout 变得更加准时，至此我们完成了如何让 setTimeout 准时的探索。setTimeout 是。
vue中setTimeout定时器的使用
风如也的博客
05-22 1677
created() { if (this.timer) { clearTimeout(this.timer) } this.getCount() }, methods: { // 定时器（每隔一分钟获取一次状态） getCount() { this.getrealtime() let _this = this this.timer = setTimeout(() => { _this.g..
Vue 中的 $nextTick 和 setTimeout 方法使用
最新发布
EverythingAtOnce的博客
12-14 1235
nextTick和setTimeout都是在异步环境中执行代码的方式，但各自适用于不同的场景。Vue 的nextTick提供了一种优雅的方式来确保在 DOM 更新后执行操作，而setTimeout则是 JavaScript 中常用的延迟执行方法。
vue中使用setTimeout
09-09
在Vue中使用setTimeout函数可以实现延迟执行某个函数或代码块的效果。然而，在Vue中使用setTimeout时需要注意到一个问题，即setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会导致this指向的是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值