Question

在这里遇到一些奇怪的行为。我有以下按钮元素：

<input id="button" type="submit" value="Sign up now">

并且它包含在带有其他输入的表单中。当我单击此按钮时，我想先更改按钮的值，等待2秒，然后再将其更改。基本上只是试图模拟正在进行的某种处理。

这是我的JS：

button.onclick = function submitForm() {
    button.value="Submitting...";
    button.style.display = 'none';
    button.style.display = 'block';
    start = new Date().getTime();
    while(new Date().getTime() - start < 2000);
};

问题是，我从来没有看到价值改变为＆＃34;提交...＆＃34;直到while循环结束。但是，更改值的行在while循环之前，如果它不是先运行，不管是否存在while循环？它似乎在没有循环2秒暂停的情况下正常工作。

任何人都知道这里发生了什么？

Answer 1

JS是单线程编程语言

循环将阻止UI线程，因此您将无法看到更改。

改为使用setTimeout(func,delay)。

var button = document.querySelector('input[type=submit]');

button.onclick = function () {
    
    button.value="Submitting...";

    setTimeout(function(){
            button.value = "Sign up now";
   },2000);
};

<input id="button" type="submit" value="Sign up now">

你也想要Check this

Answer 2

这是你想要做的吗？ https://jsfiddle.net/vbz4n2fg/

button.onclick = function submitForm() {
    button.value="Submitting...";

    setTimeout(function(){ button.value="Sign up now"; }, 2000);

};

Answer 3

我想这就是你要找的东西。

button = document.getElementById('button');

button.onclick = function submitForm() {
    var initialValue = button.value;
    
    button.value = 'Submitting...';
    setTimeout(function(){
      button.value = initialValue;
    }, 2000);
    
};

<input id="button" type="submit" value="Sign up now">

Answer 4

您正在使用输入类型=＆＃34;提交＆＃34;。通常，这种按钮会刷新页面，忽略其余的javascript。尝试将输入类型更改为按钮，或使用带有类型按钮的按钮标记。

更改按钮的值在延迟之后不会直观显示

4 个答案: