vue多个等待几秒再执行，可以用await加setTimeout实现

最新推荐文章于 2025-04-27 10:07:29 发布
最新推荐文章于 2025-04-27 10:07:29 发布
阅读量5.8k 收藏 3
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myforr/article/details/127154493
版权

用的vue，刚开始一直想只用setTimeout

//错误示意
liucheng(){
    var _this = this;
    _this.active = 'flipped';
	setTimeout(
		_this.active = '';
	, 2000)
	setTimeout(
		_this.active = 'flipped';
	, 2000)
},

上面这样连续两个，第一个setTimeout不执行
所以后面用async+await（里面setTimeout）就可以了
因为要等await返回结果才往下面执行

//正确示意
async liucheng(){
    var _this = this;
    _this.active = 'flipped';
    await new Promise(res => setTimeout(res, 2000))  //等待后执行，1000为1秒
    _this.active = '';
    await new Promise(res => setTimeout(res, 2000))  //等待后执行，1000为1秒
    _this.active = 'flipped';
}
myforr
关注
Vue - 实现将 Ajax 异步网络请求改为同步执行，等待 Promise 风格的接口请求完毕再执行后面的代码（适用于 “等待接口数据获取成功后，在执行下面的语句“ 等需求）超详细示例及注释解决方案
王二红
01-12 5644
jsvue如何将ajax请求从异步改为同步，vue请求接口是异步的怎么修改成同步，vue异步请求接口获取数据改为同步，不获取到数据不往下执行，vue怎么等待接口数据获取完毕后再执行下面的代码，vuejsJS异步改为同步示例代码，vue等待axiosajax请求完毕获取到数据后再执行其他代码，vue将异步执行的axios请求设置为同步执行，vue如何使用async、await实现同步请求，vue如何将Ajax请求从异步改为同步，vue如何把网络请求，把异步改成同步呢？jsvue如何把定时器se
vue中的async和await
qinshi501的博客
01-28 2225
在 Vue.js 中，async 和 await 的高级用法通常涉及更复杂的异步逻辑处理，包括错误处理、条件逻辑、并发请求等。
vue实现几秒后跳转新页面代码
10-14
主要介绍了vue实现几秒后跳转新页面代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript中setTimeout与await结合使用方法
最新发布
BillKu的博客
04-27 473
直接无效，因为它不返回Promise。通过封装Promise，可以将setTimeout转换为await友好的形式，使代码更简洁（避免回调嵌套）。
vue等待几秒后执行，vue循环调用，setInterval()与setTimeout()计时器
热门推荐
qq_38946996的博客
10-15 1万+
上网查，说的五花八门，乱糟的。 setInterval()：他就是每隔多少秒或毫秒调用（循环的调用）。页面销毁方法也就失效了。 setTimeout()：他就是过了多少秒或毫秒调用（调用一次）。 // 过500毫秒调用 setTimeout(() => { // 方法区 }, 500); // 每过500毫秒调用一次，再过500毫秒再调用一次。 不停地调用 setInterval(() => { // 方法区 }, 500); ...
setTimeout 可以 await吗
m0_57236802的博客
05-14 1241
在 JavaScript 中，setTimeout函数本身不返回一个 Promise，因此它不能直接与await关键字一起使用，因为await是用于等待一个 Promise 解决。然而，你可以通过包装setTimeout在一个 Promise 中来使其可await，从而在async函数中按预期工作。
vue跳转页面增加等待_vue实现几秒后跳转新页面代码
weixin_36155846的博客
12-23 3239
我就废话不多说了，大家还是直接看代码吧~提交export default {data(){return {count:"",//倒计时}}},mounted(){},methods: {//几秒后进入跳转页面clickJump(){const timejump = 1;if(!this.timer){this.count = timejump ;this.show = false;this.tim...
Promise Async-await setTimeOut
qq_55729551的博客
08-30 824
async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); } async function async2() { console.log( 'async2'); } console.l...
vue3 使用async await
10-31
在Vue3中，开发者可以使用`async/await`语法来处理异步操作，这是一种更加优雅、易于理解和维护的方式来替代传统的`.then().catch()`链式调用。下面将详细介绍Vue3中`async/await`的使用及其相关知识点。 ### 1. `...
vue中用 async/await 来处理异步操作
10-15
在这个例子中，调用`testResult`后，遇到`await`，函数执行会暂停，等待`doubleAfter2seconds`返回的Promise解决，然后将解决值赋给`result`，最后打印结果。2秒后，控制台会输出60。 理解`async/await`的关键在于...
“Vue3 异步并发火力全开：Promise与async/await，重塑编程新境界！“
m0_53992752的博客
11-26 734
Vue3 异步并发火力全开：Promise与async/await，重塑编程新境界！在 Vue 3 中，Promise和是处理异步操作的重要工具。它们允许你在不阻塞主线程的情况下执行耗时任务，并在任务完成后执行相应的逻辑。.async/await的使用 自动封装 Promise 状态管理 Promise 的优势 链式调用 Promise.all()
vue延迟3秒跳转
qq_45101496的博客
06-09 1万+
方法一 setTimeout(()=>{ //需要延迟的代码 :3秒后延迟跳转到首页，可以加提示什么的 this.$router.push({ name:"index" }); //延迟时间：3秒 },3000)
vue中倒计时3秒后跳转页面
Zheng_xinle的博客
09-30 3912
<script> export default { data(){ return { count:"",//倒计时 } } }, created(){ ​​​​​​this.threeGo() }, methods: { //3秒后进入跳转页面 threeGo(){ const TIME_COUNT = 3; if(!this.timer){ this.count = TIME_COU
vue 鼠标右键按下两秒后触发
weixin_45270158的博客
07-11 256
【代码】vue 鼠标右键按下两秒后触发。
vue中使用async和await要求让整个项目暂停5秒怎么实现
qq_53818683的博客
04-19 2022
3.注意，这种做法会阻塞整个应用程序的执行，因此不建议在实际生产环境中使用。如果您需要在应用程序中等待长时间的操作完成，最好使用异步代码和回调函数，以便其他部分的应用程序可以继续运行。2.在需要暂停执行的地方调用该函数。1.创建一个异步函数来模拟需要等待 5 秒的操作，并在其中使用。例如，可以创建一个名为。
给 setTimeout、setInterval 配备 await 写法
大概关于
04-23 3342
setTimeout、setInterval 是两个常用的异步函数。 但作为异步函数，他们不支持 Promise或者 async/await写法。 代码写起来： setTimeout(() => { console.log('执行一些操作') setTimeout(() => { console.log('执行另一些操作') // setTimeout ... }, 3000) }, 1000) 不好看！ 尽管经过简单的封装，可以达到目的，但每次用到都封装一次——重
vue页面显示多个倒计时，列表渲染 使用setTimeOut和setInterval实现倒计时功能
susu_lsq的博客
03-14 3626
vue页面显示多个倒计时，列表渲染 使用setTimeOut和setInterval实现倒计时功能 https://blog.csdn.net/qq_42221334/article/details/87864020
Vue中使用定时器实现轮询setTimeout
weixin_42565137的博客
05-17 8171
最近做一个扫码二维码的需求，生成二维码后需要通过轮询在判断登录状态。这里我先用的定时器简单的实现了一下轮询，后面会对接到websocket handleQrcodeCheck() { let vm = this; vm.timer_id = setTimeout(() => { //vm.timer_id需要先在data中定义 vm.$http ...
前端-vue基础91-async/await处理多个异步请求
qq_41632427的博客
07-23 497
vue
vue 多个函数按照顺序执行
10-30
在Vue.js中，如果你想要确保多个函数按照特定顺序执行，你可以使用`async/await`、Promise链或者是`setTimeout`配合。这里简单介绍几种常见的做法： 1. **Promise链（Sequential Promise Chain）**: 如果每个函数都会返回一个Promise，你可以将它们连接成一个链，通过`.then()`方法依次执行。 ```javascript function func1() { return new Promise((resolve) => { // 函数1的处理... resolve(); }); } function func2() { return new Promise((resolve) => { // 函数2的处理... resolve(); }); } func1().then(func2).catch((error) => { console.error(error); }); ``` 2. **Async/Await (Sequential Execution)**: 使用async/await可以让你的代码看起来更像同步，但实际上仍然是异步的。你需要确保每个函数前都有`async`关键字，并且每个函数内部都用`await`等待上一个任务完成。 ```javascript async function executeInOrder() { await func1(); await func2(); } executeInOrder().catch((error) => { console.error(error); }); ``` 3. **使用setTimeout (Callback Chain)**: 如果执行时间不是特别关键，你可以使用回调函数的方式，逐个设置延时。 ```javascript function func1(callback) { setTimeout(() => { // 函数1的处理... callback(); }, 0); // 设置立即执行 } function func2(callback) { setTimeout(() => { // 函数2的处理... callback(); }, 1000); // 设定第二个函数延迟1秒执行 } func1(() => func2()); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值