javascript - 超时后如何将按钮恢复到原始状态

Question

嗨，我正在尝试编写一个 JQuery 函数；

使用 class .load-on-click 将按钮的类更改为 btn-warning 并将按钮文本更改为加载

然后，在超时后，将按钮返回到它更改为 btn-warning 之前的上一个类，并将按钮文本返回到它更改之前的相同文本。

我目前在下面工作，但是 不能让它返回到它之前的类，我只是暂时将它设置为 btn-primary；如果有人知道我会怎么做，那就太好了，谢谢。

    jQuery("#ntc-web-main .load-on-click").click(function () {
        var buttonText = jQuery(this).text();

        jQuery(this)
            .text("Loading")
            .removeClass(
                "btn-default btn-primary btn-success btn-info btn-danger btn-link"
            )
            .addClass("btn-warning");

        //revert to original state,
        setTimeout(function () {
            jQuery(this)
                .text(buttonText)
                .removeClass("btn-warning")
                .addClass("btn-primary");
        }, 10000);
    });

Answer 1

jQuery("#ntc-web-main .load-on-click").click(function () {
        var buttonText = jQuery(this).text();

        jQuery(this)
            .text("Loading")
            .removeClass(
                "btn-default btn-primary btn-success btn-info btn-danger btn-link"
            )
            .addClass("btn-warning");

        //revert to original state,
        setTimeout(() => {
            jQuery(this)
                .text(buttonText)
                .removeClass("btn-warning")
                .addClass("btn-primary");
        }, 10000);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='ntc-web-main'>
<button class='load-on-click'>
click me
</button>
</div>