jQuery setTimeout()函数

Question

我是JS的新手,面临一些看似简单的挑战.

我想做的是:

1. 用户点击一个表示"提交"的按钮
2. 单击按钮时,"提交"一词将更改为"请稍候..."并且按钮被禁用
3. 该按钮被禁用2秒钟
4. 在2秒之后,"请提交.."这个词改回"提交"并且按钮被激活(不再禁用)

我写了下面的代码.对此提出任何建议将非常感激

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

Answer 1

问题是在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"/>