setInterval立即触发一次以及setInterval同步执行的解决办法

最新推荐文章于 2024-08-13 22:02:28 发布

周英雄

最新推荐文章于 2024-08-13 22:02:28 发布

阅读量3.4w

点赞数 14

文章标签： javascript html5

本文链接：https://blog.csdn.net/zhouyingxiong/article/details/120219525

版权

本文探讨了JavaScript中setInterval函数的异步执行特性，以及如何通过异步控制实现同步效果。方法包括在setInterval前预执行代码和使用async/await结合Promise来控制执行流程。同时，展示了如何利用Promise延迟执行以确保代码块执行完毕。

摘要由CSDN通过智能技术生成

实现setInterval刷新页面立即执行一次

问题：setInterval函数在刷新页面的时候第一次执行需要等到设置的循环时间到才执行
方法1：在setInterval函数前写一遍要执行的js代码（可实现，但不雅观），代码如下：

 console.log(“立即执行”);
setInterval(function(){
  console.log(“立即执行”);
},10000)

方法2：代码如下：

function fn() {
    console.log(“立即执行”);
    return fn    // 函数中返回自身
}
setInterval(fn(), 10000)    // 定时器中，函数先执行一次

setInterval小知识：
setInterval(fn(), 2000); 加括号立即执行,且执行一次.
setInterval(fn, 2000);不加括号,2秒后执行,且循环执行.

实现setInterval同步执行

问题：setInterval函数为异步执行（setTimeout同理），导致代码块没有执行完就进入到下一个执行条件了
方法：代码如下：

setInterval(function(){
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
(async function loop() {
    for (let i = 0; i < 13; i++) {
	    console.log(“停5秒前执行的代码”);
        await delay(5000);//线程停5秒后再执行后面的代码
        console.log(“停5秒后执行”);
    }
})();
},100000)