点击按钮后为JavaScript添加延迟：实现Div重载前的延迟与加载图标

你原来的代码把setTimeout放错位置了——你现在是延迟10秒才绑定点击事件，而不是点击后延迟重载div。正确的做法是把延迟逻辑放在点击事件的回调函数内部，同时添加加载图标的显示/隐藏逻辑。

修正后的完整代码 #

HTML部分（添加加载提示）

<a href="#" id="something">click</a>

<div id="mydiv">
    <!-- 你的原有内容 -->
</div>
<!-- 加载提示元素，初始隐藏 -->
<div id="loading" style="display:none; color:#666;">加载中...</div>

JavaScript部分

// 绑定点击事件
$('#something').click(function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    
    // 显示加载提示
    $('#loading').show();
    
    // 设置1-2秒延迟（这里用1500毫秒即1.5秒，可自行调整）
    setTimeout(function() {
        // 执行div重载操作
        // 注意：jQuery没有原生的reload()方法，你需要根据实际需求实现重载逻辑：
        // 示例1：重新加载某个页面片段到div中
        // $('#mydiv').load('你的内容URL');
        // 示例2：刷新现有内容（比如重新渲染数据）
        $('#mydiv').html('重载后的新内容');
        
        // 重载完成后隐藏加载提示
        $('#loading').hide();
    }, 1500);
});

关键说明 #

• 把setTimeout放在点击事件内部，才能实现点击后延迟执行重载的效果。
• 用e.preventDefault()阻止a标签的默认跳转，避免页面意外刷新。
• 加载提示可以替换成你需要的样式（比如GIF动图），只需要修改#loading的内容和CSS样式即可。

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