js 显示等待信息或图片

Question

有经验的朋友请提供一下代码，万分感激！我需要的功能是：
button 按下去调用一个耗时的js程序，程序运行期间显示等待信息或图片。

Answer 1

耗时的JS程序   写个的循环啊   多少多少输出信息 或图片  Timer也行啊

Answer 2

这里指的耗时的程序只是一次调用，没有循环（例如ajax)。我试了用SetTimeOut(), 但等待信息一出现就立即消失. 不知如何才能做到等待信息一直显示（直到调用的程序运行完）。有经验的朋友还请提供一下代码。

Answer 3

不知道你是不是想要这个东东.
var btn = document.getElementById("xxbtn");
btn.lock = false;
btn.onclick = function(){
    // 10s
    var t, loop, now = 0, max = 10;
    loop = function(){
        if (now < max){
            console.log("读取中... 还剩" + max + "秒");
            // 执行其他方法
        }
        else {
            clearInterval(t);
            // 执行其他方法
        }
    }    if (btn.lock = false){
        btn.lock = true;
        t = setInterval(loop, 1000);
    }
}

Answer 4

（1）给按钮绑定个单击事件函数，该函数功能如下
1.首先找个div或者其他元素啥的插进去个gif图或者“loading...”；
2.然后setTimeout(func,time);
（2）同时还要把func（耗时的程序）稍微调整一下，即在func最后（所有功能执行完毕后）添加上“清除之前插入的gif或者字体”的功能。

Answer 5

（1）给按钮绑定个单击事件函数，该函数功能如下
1.首先找个div或者其他元素啥的插进去个gif图或者“loading...”；
2.然后setTimeout(func,time);
（2）同时还要把func（耗时的程序）稍微调整一下，即在func最后（所有功能执行完毕后）添加上“清除之前插入的gif或者字体”的功能。 ----  我就是这样做的，可是等待信息一出现就立即消失!! 不知如何解决。

Answer 6

<script>
function ShowWait()
{
  labwaiting.style.display ="block";
 setTimeout(function(){
  GetAnalysis();
   labwaiting.style.display ="none";
 },0);
}
</script><label id="labwaiting" style="display:none;">Please wait...</label>
<button onclick="ShowWait()">Test Button</button>//其中GetAnalysis()就是那个耗时长的程序。这个代码现在的问题是labwaiting显示后就立即消失!! 无法持续到GetAnalysis()运行完。

Answer 7

（1）首先，不管GetAnalysis是不是异步操作，你这个setTimeout用的都是没啥意义的，所以先把setTimeout去了。
（2）然后：
如果GetAnalysis不是异步，那么只去掉setTimeout就可以了。
如果GetAnalysis为异步操作，“labwaiting.style.display ="none";”这个要加在GetAnalysis函数中，而且要加在最后面，不过具体加在什么位置合适还要看你的GetAnalysis的具体代码，如果有回调函数，直接加在回调里就可以。
ps：你不引用，别人不知道你回复的~~

Answer 8

哈哈，问题解决了。太感谢qwklove了。按你的提示，我去掉setTimeout, 然后labwaiting.style.display ="none";这个加在GetAnalysis函数中，而且加在最后面 -- 就搞定了。--- 再次感谢，呵呵，js我实在是菜得不行。（论坛也不大会用哦。呵呵。我真不知道是怎么引用。--是不是“提交回复”前点击一下相关楼的“引用”链接呢？）