Chrome开发者控制台中使用循环无法同步更新textarea值的问题

普通for循环是同步执行的，浏览器会优先跑完整个循环，才会腾出手更新页面渲染，所以你看不到中间的变化，只能最后一次修改生效。

给你两个实用的解决办法：

方法一：用setTimeout加延迟遍历 #

const qlist = ["This is sample text 1", "This is sample text 2", "This is sample text 3"];
qlist.forEach((text, index) => {
  setTimeout(() => {
    document.querySelector('textarea').value = text;
  }, index * 1000); // 每隔1秒切换一次，时间可以自己调整
});

通过forEach遍历数组，给每个元素按索引设置不同的延迟，让浏览器有时间在每次修改后渲染页面，就能看到实时变化了。

方法二：用async/await模拟同步延迟 #

const qlist = ["This is sample text 1", "This is sample text 2", "This is sample text 3"];

async function updateTextarea() {
  for (let x of qlist) {
    document.querySelector('textarea').value = x;
    await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒再执行下一次
  }
}

updateTextarea();

把循环放到async函数里，每次修改后await一个延迟的Promise，这样循环会暂停等待，给浏览器留足渲染时间，看起来就像同步实时更新一样。

另外提醒下：如果页面没引入jQuery，$('textarea')是无效的，用原生的document.querySelector('textarea')更靠谱，避免依赖第三方库。

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