多个表单按钮的setTimeout与clearTimeout互相干扰问题

你的问题根源很明确：全局的timerId变量被所有按钮共享，当你在2秒内点击另一个按钮时，clearTimeout(timerId)会清除前一个按钮的定时器，导致它无法恢复到原始状态。要解决这个问题，我们需要让每个按钮拥有自己独立的定时器，互不影响。

下面是具体的解决方案：

核心思路 #

不再使用全局变量存储定时器ID，而是利用jQuery的data()方法，将每个按钮的定时器ID绑定到按钮自身的元素上。这样每个按钮只管理自己的定时器，不会干扰其他按钮的状态。

同时还要注意一个小问题：你的HTML里多个按钮使用了同一个id="button"，这是不符合HTML规范的（ID必须唯一），我们需要把它改成class。

修改后的完整代码 #

JavaScript #

var delay = 2000;
$(".product-form").submit(function(e){
    var button = $(this).find('button[type=submit]'),
        order = button.find("span:eq(0)"),
        added = button.find("span:eq(1)");
    
    // 清除当前按钮自己的定时器，而不是全局的
    clearTimeout(button.data('timerId'));
    
    added.hide();
    order.hide();
    button.addClass("green");
    added.slideDown("slow");
    
    // 将新的定时器ID存储到按钮的data属性中
    var newTimerId = setTimeout(function() {
        added.hide();
        order.show();
        button.removeClass("green");
    }, delay);
    button.data('timerId', newTimerId);
    
    e.preventDefault();
});

CSS #

form { float: left; padding: 10px; }
.hide { display: none }
.button { width: 200px; height: 40px; border: none; background: orange; }
.green { background: green !important; }

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="product-form" action="#cart" method="post">
    <button class="button" type="submit">
        <span>Order1</span>
        <span class="hide">&#10003; Added</span>
    </button>
</form>
<form class="product-form" action="#cart" method="post">
    <button class="button" type="submit">
        <span>Order2</span>
        <span class="hide">&#10003; Added</span>
    </button>
</form>
<form class="product-form" action="#cart" method="post">
    <button class="button" type="submit">
        <span>Order3</span>
        <span class="hide">&#10003; Added</span>
    </button>
</form>

关键修改点说明 #

• 移除全局timerId：不再用全局变量存储定时器，避免共享冲突。
• 使用button.data('timerId')存储定时器ID：每个按钮的定时器ID存在自己的data属性里，独立管理。
• 清除当前按钮的定时器：点击按钮时只清除自己之前的定时器，不会影响其他按钮。
• 修复重复ID问题：把id="button"改为class="button"，符合HTML规范，同时CSS选择器也对应修改。

这样修改后，每个按钮的状态切换和定时器都是独立的，点击一个按钮不会影响其他按钮的定时器，完美解决你的问题。

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