JavaScript按钮点击两次才触发内容更新问题求助（编程新手）

嘿，我太懂这种新手遇到异步问题的懵圈感了！咱们来拆解一下你的问题到底出在哪：

你的fetch是异步操作——简单说就是它会在后台悄悄发送请求拿数据，不会等着请求完成再执行后面的代码。第一次点击按钮时，changeContent()里的document.getElementById("content").innerHTML = contentText;会在fetch还没拿到文本数据的时候就跑起来了，这时候contentText还是初始的空字符串，所以页面没变化。等第一次的fetch终于拿到数据、给contentText赋值后，第二次点击按钮时，执行更新DOM的代码就用上了第一次存好的contentText，这才让你觉得“第二次点击才生效”。

两种快速修复方案： #

方案1：把DOM更新放到fetch的回调里

既然fetch的.then()是拿到数据后才会执行的，那咱们把更新内容的代码移到第二个.then里，保证只有拿到数据后才去改页面：

var buttonId = ""; 
var contentText = ""; 

function navClick(clicked_id) { 
  buttonId = clicked_id; 
  changeContent(); 
} 

function changeContent(){ 
  fetch("./pages/"+buttonId+".txt") 
    .then(function(response){ 
      return response.text() 
    }) 
    .then(function(data){ 
      contentText = data;
      // 这里才是拿到数据的时机，更新DOM就放这儿
      document.getElementById("content").innerHTML = contentText; 
    }) 
}

方案2：用async/await让代码更像“同步”

如果你觉得.then()的嵌套看着头疼，可以试试async/await语法，它能把异步代码写得像同步代码一样直观：

var buttonId = ""; 
var contentText = ""; 

function navClick(clicked_id) { 
  buttonId = clicked_id; 
  changeContent(); 
} 

// 给函数加async标记，说明里面有异步操作
async function changeContent(){ 
  // await会等着fetch请求完成，再往下执行
  const response = await fetch("./pages/"+buttonId+".txt");
  const data = await response.text();
  contentText = data;
  document.getElementById("content").innerHTML = contentText; 
}

小优化建议 #

其实contentText这个变量完全可以省略，直接用拿到的data更新DOM就行，能少写点冗余代码：

// 方案1里可以改成这样
.then(function(data){ 
  document.getElementById("content").innerHTML = data; 
})

// 方案2里改成这样
const response = await fetch("./pages/"+buttonId+".txt");
const data = await response.text();
document.getElementById("content").innerHTML = data;

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