Javascript 禁用按钮并再次重新启用

Question

我需要有关 javascript-php 按钮的帮助。

流程图:

BWAT = Button with another text-----------------ˇ

            click            counts         BWAT.    click   PHP funct.
 ENABLED ------> DISABLED X SEC ---------> ENABLED -------->MyFunction()
  ^                                                               |
  |                                                               |
  |_______________________________________________________________|

1. 已启用的按钮。
2. 当用户点击它时，它会被禁用 x 秒。 (var 秒/$秒)
3. 秒数结束后，会使用另一个按钮名称再次启用。
4. 当用户点击它时，它会运行函数。
5. 单击并运行函数后，它会再次从第一个启用的按钮开始。

就像:

Cut tree -> Cutting, 10 secs left -> Collect wood (adds xp & item to db)
  ^                                        |
  |________________________________________|

我只需要js部分，我会自己制作PHP函数。是的，我尝试寻找解决方案，但找不到好的解决方案。

Answer 1

函数setTimeout就是您所需要的。假设您使用的是 jQuery，以下是示例代码:

$('btn_selector').click(function() {
    var $btn = $(this);
    $btn.attr('disabled', true); // disable the button
    setTimeout(function(){
           $btn.attr("name", "Cutting"); // change button's name
           $btn.removeAttr('disabled');  // reenable the button
           $btn.click(function() { // add button's listener here
             // PHP-related function here
           });
        }, 10000); // 10 sec later              
     });
}