JavaScript中如何实现点击按钮后立即显示h标签请稍候提示再延时执行函数

核心修改逻辑 #

• 把按钮原来内联的setTimeout逻辑抽成独立的点击处理函数，函数内先立刻插入等待提示文本，再启动7秒延时执行原yes函数
• 等待文本用<h3>标签渲染，插入到结果展示区域，7秒后原yes函数执行时会自动覆盖该提示，完全符合不能作为按钮文字的要求

修改后完整代码 #

HTML代码 #

<label>
    你的姓名: 
    <input id="name" />
</label>
<br />
<button onclick="handleBtnClick()">测试</button> <!-- 替换原来的延时逻辑为自定义处理函数 -->
<p id="test"></p>

JS代码 #

// 新增点击处理函数，负责同时触发提示显示和延时任务
function handleBtnClick() {
  // 立刻插入h3格式的等待提示
  document.getElementById('test').innerHTML = '<h3>请稍候...</h3>';
  // 启动7秒延时执行原逻辑
  setTimeout(yes, 7000);
}

function yes() {
  var name = document.getElementById('name');
  // 原代码中的age、location变量没有对应HTML元素，不需要可以直接删除避免报错
  // var age = document.getElementById('age');
  // var location = document.getElementById('location');
  console.log("点击了测试按钮");
  var str = '你好！<p>我叫Ashish</p><p>你最近怎么样：' + name.value + '';
  document.getElementById('test').innerHTML = str;
};

可选优化 #

如果需要保留页面原有其他内容不被等待提示覆盖，可以单独给等待提示设置专属id，在yes函数执行时单独移除该元素即可。

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