Javascript每50毫秒显示一次变量_Javascript_Html_Settimeout

Javascript每50毫秒显示一次变量

javascript html

Javascript每50毫秒显示一次变量,javascript,html,settimeout,Javascript,Html,Settimeout,我想使用javascript为我的网站制作一个“加载…”小部件 var percent=0; var message="Loading... " var per="%" function count(){ percent=percent+1; if(percent==100){ alert("Loading end.") }else{ setTimeout("count",50) docu

我想使用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毫秒更新一次显示的消息。

试试看

设置间隔（计数，50）

您不想设置超时（“count”，50）

而是要设置一个每隔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

var百分比=0；
var message=“正在加载…”
var per=“%”
函数计数（）{
百分比=百分比+1；
如果（百分比==100）{
警报（“加载结束”）
}否则{
setInterval（函数（）{count（）}，50）
文件。写入（消息）
文件写入（百分比）
文件写入（按）
}
}脚本：
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);
    }
}

查看此小提琴了解更多信息
HTML:
示例中的代码缺少大量分号和结尾的花括号，但这不是最终的问题
调用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);
    }
}

你做得不对。当窗口加载时，应该调用setInterval方法。加载完成后，您应该通过使用interval的ID清除它来停止interval
var countId;
window.onload = function(){
    countId=setInterval(count,50);
}

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

尝试使用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>


测试
味精
风险值百分比=0；
var message=“正在加载…”；
var per=“%”；
var dom=document.getElementById（'progress'）；
var iv=设置间隔（函数（）{
控制台日志（消息）；
dom.innerHTML=（（百分比++）+每+''+消息）；
如果（百分比===100）{
日志（“加载结束”）；
间隙（iv）；
返回false；
}
}, 50);
这是您的实际代码，还是您尝试重新键入此问题的代码？我更喜欢这个答案，因为它更简单&我能更好地理解它。总是开始一个新的间隔完全不是setInterval（）的意思。这里也从未发生过清算。此示例使用setTimeout（）效果更好。看@Biby Augustine的回答。这太棒了！这个可以运行（我的不能）
var countId;
window.onload = function(){
    countId=setInterval(count,50);
}

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

<!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>