0

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

流程图：

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

            click            counts         BWAT.    click   PHP funct.
 ENABLED ------> DISABLED X SEC ---------> ENABLED -------->MyFunction()
  ^                                                               |
  |                                                               |
  |_______________________________________________________________|
  1. 启用的按钮。
  2. 当用户点击它时，它会被禁用 x 秒。(var sec / $sec)
  3. 秒计数结束后，它会再次启用另一个按钮名称。
  4. 当用户点击它时，它会运行函数。
  5. 单击并运行功能后，它会以第一个启用的按钮重新启动。

就像是：

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

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

4

4 回答 4

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              
     });
}
于 2013-01-06T12:59:02.637 回答
1

不使用 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();
}
于 2013-01-06T13:08:08.017 回答
0

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

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

要与服务器通信，您可以使用 jQuery$.ajax方法或更具体的方法之一。请注意，与服务器交谈需要一些时间，因此请准备好等待。当 JQuery 接收到来自服务器的成功响应时，JQuery 将调用您的回调（或立即，如果您在 AJAX 完成后附加回调 - 从 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 或 hyphen-case。

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

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;
  }
});
于 2013-01-06T13:20:55.027 回答
0

你可以使用 jquery 函数来做到这一点......像这样的......

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

如果您希望它在一段时间内禁用，请尝试使用 setTimeout() 函数...

setTimeout(function(){$("your_btn_id").attr("disabled", True);},2000);
于 2013-01-06T13:00:26.613 回答