JavaScript函数变量作用域问题：循环切换背景色仅显示末尾黄色

• JavaScript是单线程执行的，同步代码的执行优先级远高于UI渲染，你写的for循环会在几毫秒内执行完全部三次赋值操作，浏览器要等到整个同步函数执行完毕才会触发页面重绘，因此只会展示最后一次赋值的黄色。
• 现有逻辑没有记录上一次切换的颜色索引，每次点击都会遍历整个颜色数组，也无法实现「点击一次切换一个颜色」的循环效果。

根据你的需求分为两种常见场景：

场景1：每次点击按钮切换到下一个颜色，循环往复 #

不需要循环，新增变量记录当前颜色索引即可，修改后的JS代码如下：

const colors = ["blue", "green", "yellow"];
const btn = document.getElementById("btn");
// 记录当前使用的颜色下标，默认从第一个颜色开始
let currentIndex = 0;

function myFunction(){
    // 下标自增后对数组长度取余，超过数组长度自动回到0实现循环
    currentIndex = (currentIndex + 1) % colors.length;
    document.body.style.backgroundColor = colors[currentIndex];
}

场景2：点击一次按钮，自动按顺序依次展示所有颜色 #

可以用setTimeout给每个颜色的赋值操作加延迟，错开执行时间让UI有时间渲染：

const colors = ["blue", "green", "yellow"];
const btn = document.getElementById("btn");

function myFunction(){
    for (let i=0; i<colors.length; i++){
        // 每个颜色间隔1秒显示，依次叠加延迟时间
        setTimeout(() => {
            document.body.style.backgroundColor = colors[i]
        }, i * 1000)
    }
}

内容的提问来源于stack exchange，提问作者goosey9