javascript - 如何仅使用 javascript 在短时间内更改按钮文本？

Question

我正在制作一个购物车网站，我希望我的添加到购物车按钮在点击它时显示商品已添加，但只持续大约 2 秒然后它就会改变返回加入购物车。我该如何实现？

Answer 1

在纯 Javascript 中，您可以使用一个变量来检查按钮是否被单击，如果没有，则将按钮设置为所需的字符串并在两秒后将其改回。

document.getElementById('button').addEventListener('click', function (clicked) {
    return function () {
        if (!clicked) {
            var last = this.innerHTML;
            this.innerHTML = 'Item added';
            clicked = true;
            setTimeout(function () {
                this.innerHTML = last;
                clicked = false;
            }.bind(this), 2000);
        }
    };
}(false), this);

<button id="button">Add to Cart</button>