[解決済み] jQuery setTimeout()関数 [重複]について

質問

私はJSの初心者で、単純に見えるかもしれないいくつかの課題に直面しています。

私がやりたいことは

1. ユーザーが'submit'と書かれたボタンをクリックした場合
2. ボタンをクリックすると、「submit」の文字が「please wait...」 & に変わり、ボタンが無効化されます。
3. ボタンは2秒間無効化されます。
4. 2秒後に「please submit...」という単語が「submit」&に変わり、ボタンが有効になります（無効ではなくなります）。

以下のようなコードを書きました。これについて何かアドバイスがあれば、とてもありがたいです。

html

<form action="#" method="post">
    <input type="button" name="submit" value="Submit" class="submit_wide" id="myBtn" >
</form>

javascript

$(".submit_wide").click(function () {
    $(this).val('Please wait..');
    $(this).attr('disabled', true);
    setTimeout(function() { 
        $(this).attr('disabled', false);
        $(this).val('Submit');
    }, 2000);
});

解決方法は？

この問題は setTimeout() を呼び出します。 this はボタンを参照しません。ボタンへの参照を保持するための変数を設定する必要があります。

以下にサンプルを作成しました。という変数を使っているところを見てください。 $this .

$(".submit_wide").click(function () {
    var $this = $(this);
    $this.val('Please wait..');
    $this.attr('disabled', true);
    setTimeout(function() { 
        $this.attr('disabled', false);
        $this.val('Submit');
    }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" class="submit_wide" value="Submit"/>

UPDATE モダンブラウザに対応し 矢印機能 を変更しないようにすることができます。 this コンテキストを使用します。以下の更新されたスニペットをご覧ください。

$(".submit_wide").click(function () {
    $(this).val('Please wait..');
    $(this).attr('disabled', true);
    setTimeout(() => { 
        $(this).attr('disabled', false);
        $(this).val('Submit');
    }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" class="submit_wide" value="Submit"/>