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.js中settimeout遇到的问题(时间参数短效果不稳定)
10-15
总的来说，当在Vue中使用setTimeout进行动画效果处理时，需要确保时间间隔足够让Vue完成每一步的DOM更新。通过合理设置延时并理解Vue的生命周期，可以避免此类问题，保证动画效果的稳定性和用户体验。
vue 定时器 setTimeout 的使用
java初识者
08-25 3万+
1、最简单的用法，500毫秒后执行，执行结束，定时器自动清除。 setTimeout(function() { // 需要执行的代码 }, 500); // 定时时间 2、循环执行定时器 data() { return { // 定时器 monitorUser: "", // 接收定时器id，便于清除定时器 } }, onHide() { // 清除定时器 clearTimeout(that.monitorUser); }, onShow() {
在vue中如何实现准时的setTimeout
MYuanFang的博客
12-14 1156
当每一次定时器执行时后，都去获取系统的时间来进行修正，虽然每次运行可能会有误差，但是通过系统时间对每次运行的修复，能够让后面每一次时间都得到一个补偿。通过系统的时间补偿，能够让我们的 setTimeout 变得更加准时，至此我们完成了如何让 setTimeout 准时的探索。setTimeout 是。
setTimeout在vue中的正确使用
热门推荐
大唐锦绣的博客
10-25 13万+
笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏，使用到setTimeout函数。遇到了1个坑: 在vue的某个方法(点击后执行) setTimeout(this.end(),4000);//娃娃消失 这里奇怪的是,end方法的确被执行了。但是没有执行4s后执行的效果。那我要你合用呢！其实，问题还是出在笔者身上，大家请看下图 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() setInterval()函数的问题
10-18
然而，在Vue的上下文中使用这两个函数时，需要注意一些特定的问题，主要是由于JavaScript的`this`指向规则与Vue的响应式系统之间的交互。 在给定的示例中，`setTimeout` 的回调函数内部，`this` 的上下文发生了变化...
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中 使用定时器 （setInterval、setTimeout）
用心创作每一篇文章
10-02 2万+
开始的时候创建了一个定时器 setInterval ，时间间隔为2秒，每2秒都会调用一次函数 valChange，从而使 value 的值+1。js中定时器有两种，一个是循环执行 setInterval，另一个是定时执行 setTimeout。顾名思义，循环执行就是设置一个时间间隔，每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉；开始时候创建一个定时器 setTimeout，只在2秒后执行一次方法。定时执行 setTimeout 是设置一个时间，等待时间到达的时候。
vue定时器setInterval、setTimeout
@@小旭的博客
09-04 875
定时执行 setTimeout 是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是不再运行；循环执行就是设置一个时间间隔，每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉；1、循环执行setInterval。2、定时执行setTimeout。
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(
Vue延时函数setTimeout
wa123579的博客
05-08 1万+
单位是毫秒 setTimeout(() => { //代码 }, 1000);
vue settimeout 实例_分享：vue使用技巧和项目中遇到的问题
weixin_31706903的博客
02-03 292
这里给大家分享一下vue中的一些技巧，希望对大家有用处。(话不多说上代码)1，vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开，没有保存已输入的信息。)//在路由组件中：mounted(){},beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存表单，或者自动后台为其保存 }else{ next(true);/...
vue中setTimeout的使用
youshuang1207的博客
07-07 570
vue中使用定时器setTimeout
qq_37642495的博客
04-29 2169
今天有一个需求就是页面需要几秒中调一次请求，自然用setTimeout，然后就发现有一个Bug，明明设置的是5秒，可是页面却一直刷新，根本不是5秒，后来感觉是因为没有清除定时器，修改之后，发现是这样的，应该在VUE销毁前的钩子里面清除定时器： 这里附上一点点代码： 注意定时器都是有返回值的，这里推荐一个讲的很详细的定时器设置及其清除的链接：http://www.cnblogs.com/wangy...
vue中setTimeout的清空问题
juse__we的博客
11-14 1万+
今天有个同事在做清除setTimeout时，发现在另一个函数中clearTimeout后发现timer变量并没有变化 于是我写了下面的demo： &lt;html&gt; &lt;input onclick="myAlert()" type="button" value="清除" /&gt; &lt;/html&gt; &lt;script type="tex
vue中使用setTimeout
09-09
在Vue中使用setTimeout函数可以实现延迟执行某个函数或代码块的效果。然而，在Vue中使用setTimeout时需要注意到一个问题，即setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会导致this指向的是window对象，而不是Vue实例。为了解决这个问题，可以使用箭头函数来确保在setTimeout内部的this指向Vue实例。比如在Vue的方法中使用setTimeout可以这样实现： ```javascript test: function () { let _this = this; setTimeout(() => { // 在这里执行你想要的代码 }, 1600); } ``` 在这个例子中，将Vue实例的this保存在变量_this中，然后使用箭头函数来确保在setTimeout内部的this指向的是Vue实例，从而可以正常访问Vue实例的属性和方法。这样就可以在Vue中使用setTimeout函数了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值