javascript - 如何在单击 JavaScript 函数中的按钮时添加文本 "Please wait a while..."

Question

我使用 JavaScript 创建了一些函数调用，并使其延迟 7 秒，现在我希望当用户单击按钮时，一旦延迟就会出现“请稍候...”文本(不在按钮文本中)时间开始。

“请稍候”文本应显示为标题标签(h3 或 h4 标签)

任何帮助/建议，请...

function yes() {
  var button = document.getElementById('test');
  var name = document.getElementById('name');
  var age = document.getElementById('age');
  var location = document.getElementById('location');
  console.log("clicked on Test-Button");
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
};

<label>
    Your Name: 
    <input id="name" />
</label>
<br />
<button onclick="setTimeout(yes, 7000)">Test</button> <!-- timeout -->
<p id="test"></p>

Answer 1

最好通过 javascript 附加事件监听器(而不是内联 onclick) - 在这种情况下，它为我们提供了一个很好的机会来执行“请稍候...”插入 - 它会被覆盖(希望)当最终输出到达时。

window.addEventListener('load', ()  => {
  document.querySelector('button.test-btn').addEventListener('click', e => {
    document.querySelector('#test').innerHTML = '<h3>Please Wait...</h3>';
    setTimeout(yes, 7000)
  })
})

function yes() {
  var button = document.getElementById('test');
  var name = document.getElementById('name');
  var age = document.getElementById('age');
  var location = document.getElementById('location');
  var str = 'Hello! <p> My name is Ashish</p><p>How Are You: ' + name.value +
    '';
  document.getElementById('test').innerHTML = str;
};

<label>
    Your Name: 
    <input id="name" />
</label>
<br />
<button class='test-btn'>Test</button>
<p id="test"></p>