Question

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

流程图：

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

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

已启用的按钮。
当用户点击它时，它会被禁用x秒。（var sec / $ sec）
秒计数结束后，再次使用其他按钮名称启用。
当用户点击它时，它会运行功能。
点击并运行功能后，第一次启用按钮会再次启动。

就像：

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              
     });
}

Answer 2

不使用jquery：（jsfiddle）

var myButton = document.getElementById('myButton'),
  delay = 3;
myButton.onclick = function () {
  myButton.value = 'Please wait';
  myButton.disabled = true;
  setTimeout(function () {
    myButton.value = 'Now click again';
    myButton.disabled = false;
    myButton.onclick = function () {
      asyncRequest('myPHPfunction', function () {
        myButton.value = 'Click here';
      });
    };
  }, delay * 1000);
};

function asyncRequest(url, func) {
  // asynchronously call your PHP function and carry out function when it's done
}

我假设您已经拥有类似asyncRequest的东西，它使用XMLHttpRequest来调用PHP页面，然后在函数完成时调用它。

或者，由于上面开始变得混乱且难以阅读，您可以改为命名所有函数（而不是使用匿名函数）并将它们分组到对象中。（jsfiddle）

var delay = 3;
function MyButton() {
  var el = document.getElementById('myButton');
  function set(value, click) {
    el.value = value;
    el.onclick = click;
    el.disabled = click ? false : true;
  }
  function init() {
    set('Click here', wait);
  }
  function wait() {
    set('Please wait', null);
    setTimeout(waitReclick, delay * 1000);
  }
  function waitReclick() {
    set('Now click again', waitPHP);
  }
  function waitPHP() {
    set('Running the PHP', null);
    asyncRequest('myPHPFunction', init);
  }
  init();
}
new MyButton();

function asyncRequest(url, func) {
  // asynchronously call your PHP function and carry out function when it's done
  func();
}

Answer 3

您可以使用jquery函数来执行此操作......类似这样......

$('#your_btn_id').click(function() {
    $('#your_btn_id').attr('disabled', True);
});

如果你想让它在一段时间内禁用，那么尝试使用setTimeout（）函数......

setTimeout(function(){$("your_btn_id").attr("disabled", True);},2000);

Answer 4

由于你将进行AJAX调用，我将继续推荐jQuery库 - 并将其用于DOM遍历。

要等一段时间，请使用setTimeout javascript函数，该函数将所述延迟后发生的事件作为回调函数。

要与服务器通信，您可以使用jQuery $.ajax方法或其中一个更具体的方法。请注意，与服务器通信需要一些时间，因此请准备好等待。当JQuery从服务器收到成功的响应时，它会调用你的回调（如果你在AJAX完成后附加了回调，那么JQuery会立即调用它 - 这可能是自jQuery 1.5以后）

您需要在某个地方存储替代名称。我建议将按钮作为数据属性存储：

<input id="cut-tree" type="button"
   data-text-before="Cut tree"
   data-text-delay="Cutting tree, please wait"
   data-text-after="Collect Wood"
   value="Cut tree"
/>

jQuery有一种轻松检索数据属性的方法：elem.data("textBefore");你可以在这里使用camelCase或连字符。

如果您不想分离和附加事件处理程序，则需要有一个有状态处理程序：

var state = "before";
var $button = $("#cut-tree");
$button.click(function(){
  switch(state){
    case "before":
      state = "wait";
      $button.val($button.data("textDelay"))
       .attr("disabled", "disabled");
      setTimeout(function(){
        state = "after";
        $button.val($button.data("textAfter"))
         .removeAttr("disabled");
      }, 10000); //10000ms = 10s
      break;
    case "after":
      state = "wait"
      // change the text here as well?
      $.post("/ajax.php", {user: user, action: "addWood"})
       .done(function(){
        state="before";
        $button.val($button.data("textBefore"));
      });
      break;
    //case "wait": break;
  }
});

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

4 个答案: