jQuery setTimeout() Functie

Ik ben nieuw bij JS en sta voor een aantal uitdagingen die misschien eenvoudig lijken.

wat ik wil doen is:

1. een gebruiker klikt op een knop met de tekst ‘verzenden’
2. wanneer op de knop wordt geklikt, verandert het woord ‘verzenden’ in ‘een ogenblik geduld…’ & knop is uitgeschakeld
3. de knop is gedurende 2 seconden uitgeschakeld
4. na 2 seconden verandert het woord ‘submit..’ weer in ‘submit’ & de knop wordt geactiveerd (hij is niet langer uitgeschakeld)

ik heb de onderstaande code geschreven. Elk advies hierover wordt zeer op prijs gesteld

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

Antwoord 1, autoriteit 100%

Het probleem is dat binnen de setTimeout()-aanroep, thisniet naar de knop verwijst. U moet een variabele instellen om de verwijzing naar de knop te behouden.

Ik heb hieronder een voorbeeld gemaakt. Kijk hoe ik de variabele met de naam $thisgebruik.

$(".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"/>