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

Question

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

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

任何help/suggestion，请...

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）附加 eventListeners - 在这种情况下，它为我们提供了一个很好的机会来执行 Please Wait... 插入 - 这当完成的输出到达时被（理想地）覆盖。

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>

Answer 2

将 setTimeout 移动到点击内部

我还建议 addEventListener 没有内联事件处理程序

window.addEventListener("load", function() {
  document.getElementById("test").addEventListener("click", function() {
    console.log("clicked on Test-Button");
    const wait = document.getElementById('wait');
    wait.removeAttribute("hidden")
    setTimeout(function() {
      const name = document.getElementById('name'),
        age = document.getElementById('age'),
        str = '<p>Hello!<br/>My name is Ashish</p><p>How Are You ' + name.value + '?</p>';
      wait.setAttribute("hidden", true)
      document.getElementById('test').innerHTML = str;
    }, 7000);
  });
});

<label>
    Your Name: 
    <input id="name" />
</label>
<br />
<button type="button" id="test">Test</button>
<!-- timeout --><span id="wait" hidden>Please wait</span>
<p id="test"></p>

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

How to add text "Please wait a while..." on clicking the button in JavaScript function

html

javascript

jquery

onclick