0

javascript-php ボタンのヘルプが必要です。

フローチャート：

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

            click            counts         BWAT.    click   PHP funct.
 ENABLED ------> DISABLED X SEC ---------> ENABLED -------->MyFunction()
  ^                                                               |
  |                                                               |
  |_______________________________________________________________|
  1. 有効になっているボタン。
  2. ユーザーがクリックすると、x 秒間無効になります。(変数秒 / $秒)
  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
}

PHPページを呼び出し、終了時に関数を呼び出すasyncRequestようなものをすでに持っていると思います。XMLHttpRequest

または、上記のコードはごちゃごちゃしていて読みにくいので、(無名関数を使用する代わりに) すべての関数に名前を付けて、オブジェクトにグループ化することもできます。( 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

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 に答える
0

あなたは AJAX 呼び出しを行うので、jQuery ライブラリーを提案し、DOM トラバーサルにも使用します。

しばらく待つには、setTimeoutjavascript 関数を使用します。この関数は、遅延後に発生するイベントをコールバックとして受け取ります。

サーバーと通信するには、jQuery$.ajaxメソッドまたはより具体的なメソッドの 1 つを使用できます。サーバーとの通信には時間がかかるため、待つ準備をしてください。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")。ここではキャメルケースまたはハイフンケースを使用できます。

イベント ハンドラーをデタッチおよびアタッチしたくない場合は、ステートフル ハンドラーが必要です。

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 に答える