从网页上的javascript打印值
[英]Printing a value from javascript on a web page
问题描述
我有一个html页面，并希望从Java脚本函数中打印一些值。 价值需要经常变化。 我的问题是，只有在整个Java脚本代码执行完毕后才进行更改，而不是“连续”更改（或至少在代码要求更改值时更改）。 我正在使用Chrome，但尚未在其他浏览器上对其进行测试。
这是重现该问题的最小示例：
<head>
<title>Test Continuous Output</title>
</head>
<body>
<p id="data"></p>
<script>
function onClick() {
for(var i =0;i<100;i++) {
document.getElementById("data").innerHTML = i;
for(var j = 0; j < 1000; j++) {
console.log("j="+j);
}
}
}
</script>
<button onclick = "onClick()">test</button>
</body>
编辑：在此使用@Alytrem建议下的setTimeout在此代码中解决此问题：
<head>
<title>Test Continuous Output</title>
</head>
<body>
<p id="data"></p>
<script>
var n=0;
function log() {
document.getElementById("data").innerHTML = n;
n=n+1;
if(n<100) {
setTimeout(log,100);
}
}
function onClick() {
log();
}
</script>
<button onclick = "onClick()">test</button>
</body>
2 个解决方案
解决方案1
1 已采纳 2013-04-09 12:21:22
那是因为DOM将更改，但是需要重新粉刷。 当dom重新粉刷时，循环已经完成。 例如，尝试将超时设置为每100毫秒循环一次。 它将允许重新绘制DOM。
这是一种可能的解决方案，它使用setTimeout来避免在计算过程中阻塞DOM重绘。
<body>
<p id="data"></p>
<script>
var remainingTasks;
function doTask() {
for (var j = 0; j < 1000; j++) {
1 + 1;
}
console.log("remainingTasks=" + remainingTasks);
document.getElementById("data").innerHTML = 100 - remainingTasks;
remainingTasks--;
if (remainingTasks > 0) setTimeout(doTask, 10);
}
function onClick() {
remainingTasks = 100;
doTask()
}
</script>
<button onclick="onClick()">test</button>
解决方案2
-1 2013-04-09 12:22:04
我知道Document.write或alert（）是输出JavaScript变量值以进行调试和填充的唯一方法，例如： alert("j= "+j); <-更适合细节调试
或： document.write("<br/> j="+j); <-更适合快速调试
从网页打印后使用 javascript 关闭选项卡
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.