Java脚本每50毫秒显示一次变量

Question

我想使用javascript为我的网站制作一个“正在加载...”小部件。

var percent=0;  
var message="Loading... "  
var per="%"  
function count(){  
    percent=percent+1;  
    if(percent==100){  
        alert("Loading end.")  
    }else{  
        setTimeout("count",50)  
        document.write(message)  
        document.write(percent)  
        document.write(per)  
    }

但是它没有运行。 我认为我有一些错误（或完全错误）。 我怎样才能做到这一点？ 我想每50毫秒更新一次显示的消息。

Answer 1

尝试

setInterval（count，50）;

而不是setTimeOut（“ count”，50）

Answer 2

您想要设置一个间隔，间隔每x毫秒运行一次，传入一个匿名函数来调用该函数以进行调用

var percent=0;  
var message="Loading... "  
var per="%"  
function count(){  
    percent=percent+1;  
    if(percent==100){  
        alert("Loading end.")  
    }else{  
        setInterval(function() { count() },50)  
        document.write(message)  
        document.write(percent)  
        document.write(per)  
    }
} <--- you were also missing this ending brace

Answer 3

脚本：

var percent = 0;
var message = "Loading... ";
var per = "%";

$(document).ready(function () {
    count();
});

function count() {
    percent = percent + 1;
    if (percent == 100) {
        alert("Loading end.");
    } else {
        setTimeout(function () {
            count();
        }, 50);
        document.write(message);
        document.write(percent);
        document.write(per);
    }
}

看到这个提琴更多的http://jsfiddle.net/8nhmU/19/

Answer 4

看到这个jsfiddle

HTML：

<span id="loading"></span>

Javascript：

var percent = 0;
var message = "Loading...";
var per = "%";
var element = document.getElementById('loading');

var interval = setInterval(function() {
    element.innerHTML = message + percent + per;
    percent += 1;
    if(percent > 100) {
        clearInterval(interval)
    };
}, 50)

Answer 5

您的示例中的代码缺少大量的分号和结尾的花括号，但这不是最终的问题。

调用setTimeout的“问题”是第一个参数必须是实际函数，而不是字符串。 如果删除呼叫周围的引号，它将起作用。

这是重新格式化的代码副本：

var percent=0;  
var message="Loading... ";
var per="%";

function count() {
    percent++;

    if (percent == 100) {
        alert("Loading end.");
    } else {
        setTimeout(count, 50);
        document.write(message);
        document.write(percent);
        document.write(per);
    }
}

Answer 6

您做错了路。 窗口加载时，应调用setInterval方法。 当加载完成后，您应该通过使用ID清除间隔来停止间隔。

var countId;
window.onload = function(){
    countId=setInterval(count,50);
}

function count(){
    if(per=99){
      clearInterval(countId);
    }
    per++;
    //show your message
}

Answer 7

尝试使用interval并在进度完成时清除它：

<!DOCTYPE html>
<html>
    <head>
        <title>testing</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="progress">MSG</div>
        <script type="text/javascript">
            var percent = 0;
            var message = "Loading... ";
            var per = "%";
            var dom = document.getElementById('progress');
            var iv = setInterval(function(){
                console.log(message);
                dom.innerHTML = ((percent++) + per +' '+ message);
                if(percent === 100){
                    console.log("Loading end.");
                    clearInterval(iv);
                    return false;
                }
            }, 50);
        </script>
    </body>
</html>