隐藏按钮几秒钟 onclick答案

【问题标题】：Hide button for few seconds onclick隐藏按钮几秒钟 onclick
【发布时间】：2012-01-11 09:50:36
【问题描述】：

我想禁用按钮点击几秒钟，并在此期间显示图像，然后隐藏图像并再次显示按钮。

HTML：

<input type="submit" value="Submit" onclick="validate();" name="myButton" id="myButton">  
<img style="display: none;" src="/images/loading.gif" id="myImage">

JavaScript：

function validate(){

var  myButton= document.getElementById('myButton');
var  myImage= document.getElementById('myImage');

                        setTimeout (function(){
                          myButton.style.display ='none';
                        },5000);
                      setTimeout (function(){
                          myImage.style.display ='inline';
                        },5000);
}

问题：

这个js代码不是onclick执行的，而是在这个按钮的动作被调用之后（使用JSF 2）
调用此代码时，按钮隐藏并显示图像，但再也不会隐藏，按钮也不会再次显示。

请告知如何解决。

【问题讨论】：

Submit 将重新加载页面或提交表单 - 您需要将其更改为按钮或将表单定位到另一个框架/iframe/window 或使用 ajax

标签： javascript html

【解决方案1】：

您实际上是在隐藏按钮并在 5 秒后显示图像，然后再将其更改回来。试试这个：

function validate(){

    var myButton= document.getElementById('myButton');
    var myImage= document.getElementById('myImage');

    myButton.style.display ='none';
    myImage.style.display ='inline';

    setTimeout (function(){
        myButton.style.display ='inline';
        myImage.style.display ='none';
    },5000);

}

【讨论】：

【解决方案2】：

也许你的意思

                    setTimeout (function(){
                      myButton.style.display ='none';
                      setTimeout (function(){
                        setTimeout (function(){
                          myButton.style.display ='none';
                        },5000);
                        myImage.style.display ='inline';
                      },5000);

                    },5000);

【讨论】：

【解决方案3】：

您添加的代码仅用于隐藏按钮和显示图像。该函数应如下所示：

function validate(){

  var  myButton= document.getElementById('myButton');
  var  myImage= document.getElementById('myImage');

  var hide_timeout = 5000; // delay 5 sec before hide button;
  var show_timeout = 10000; // delay 10 sec before show button;

  setTimeout (function(){
    myButton.style.display ='none';
    myImage.style.display ='inline';
  },hide_timeout);

  setTimeout (function(){
    myButton.style.display ='inline';
    myImage.style.display ='none';    
  },show_timeout);

}

【讨论】：

【解决方案4】：

小调整：

function validate() {
  var  myButton= document.getElementById('myButton');
  var  myImage= document.getElementById('myImage');

  myButton.style.visibility='hidden';
  myImage.style.display ='inline';

  setTimeout (function(){
    myImage.style.display ='none';
    myButton.style.visibility ='visible';
  },5000);

  return false;
}

【讨论】：