页面加载完成前点击后禁用Flask重置链接问题排查

问题背景 #

我用Flask开发Web应用，点击重置链接会触发对应的Flask路由方法——该方法通过os.system运行一个耗时的bash脚本。脚本运行期间页面处于加载状态，此时重复点击重置链接会多次触发方法，导致脚本重复执行。我尝试用JavaScript禁用链接但没生效，相关代码如下：

原HTML代码 #

<a href="/reset" onclick="clickAndDisable(this);"> 
  <div class="butonulmeu"> 
    <span>RESET</span> <br> 
    <img src="/static/images/reset.png"> 
  </div> 
</a>

Flask路由代码 #

@app.route('/reset')
def Reset():
    os.system("./bash_script.sh")
    return redirect('/')

无效的JS代码 #

<script> 
  function clickAndDisable(link) {
    // disable subsequent clicks
    link.onclick = function(event) {
       event.preventDefault();
    }
  }   
</script>
<a href="/reset" onclick="clickAndDisable(this);">
    <div class="butonulmeu">
        <span>RESET</span> <br>
        <img src="/static/images/reset.png">
    </div>
</a>

错误原因 #

你的JS逻辑存在两个核心问题：

1. 第一次点击时，clickAndDisable只是给链接绑定了新的onclick事件，但没有阻止本次点击的默认跳转行为——页面依然会跳转到/reset并开始加载。
2. 新绑定的阻止事件仅对后续点击生效，但此时页面已经处于加载状态，用户在加载期间的点击可能不会触发这个新绑定的事件，导致重复请求无法被阻止。

解决方案 #

方案1：修改JS，立即禁用并手动发起请求 #

直接阻止第一次点击的默认行为，手动发起请求，同时立即禁用链接的交互能力：

<script> 
function clickAndDisable(link) {
    // 阻止本次点击的默认跳转
    event.preventDefault();
    
    // 视觉+交互上禁用链接
    link.style.pointerEvents = 'none';
    link.style.opacity = '0.7';
    
    // 手动请求重置接口
    fetch(link.href)
        .then(() => {
            // 请求完成后跳回首页
            window.location.href = '/';
        })
        .catch(err => {
            // 出错时恢复链接可用状态
            link.style.pointerEvents = 'auto';
            link.style.opacity = '1';
            console.error('重置失败:', err);
        });
}   
</script>
<a href="/reset" onclick="clickAndDisable(this);">
    <div class="butonulmeu">
        <span>RESET</span> <br>
        <img src="/static/images/reset.png">
    </div>
</a>

方案2：替换为按钮（更简洁） #

用<button>代替<a>标签，避免默认跳转行为，逻辑更清晰：

<script> 
function handleReset() {
    const btn = document.querySelector('.reset-btn');
    btn.disabled = true;
    btn.style.opacity = '0.7';
    
    fetch('/reset')
        .then(() => window.location.href = '/')
        .catch(err => {
            btn.disabled = false;
            btn.style.opacity = '1';
            console.error('重置失败:', err);
        });
}   
</script>
<button class="reset-btn butonulmeu" onclick="handleReset()">
    <span>RESET</span> <br>
    <img src="/static/images/reset.png">
</button>

注：需要调整.butonulmeu的CSS样式以适配按钮元素。

方案3：后端加锁（彻底防止重复执行） #

前端禁用仅能防误触，要彻底阻止脚本重复执行，建议在后端添加线程锁：

from flask import redirect
import os
import threading

# 全局锁，保证同一时间只有一个重置请求执行
reset_lock = threading.Lock()

@app.route('/reset')
def Reset():
    # 尝试获取锁，获取失败直接返回（说明已有重置在运行）
    if not reset_lock.acquire(blocking=False):
        return redirect('/?reset_in_progress=1')
    
    try:
        os.system("./bash_script.sh")
    finally:
        # 无论脚本执行成功与否，都释放锁
        reset_lock.release()
    
    return redirect('/')

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