我想测量加载文本需要多少毫秒(取决于我稍后将如何设计它)并进行 10 次测量。我已将其放在一起，但使用 RequestAnimationCode 后，它似乎不再加载。
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var stuff = [];
stuff[0] = new Array( "Text1", "Bla1Bla1Bla1" );
stuff[1] = new Array( "Text2", "Bla2Bla2Bla2Bla2Bla2Bla2Bla2Bla2Bla2Bla2" );
stuff[2] = new Array( "Text3", "Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3Bla3" );
var lastTime = 0;
var count = 10;
var nprint = 50;
var t0 = 0;
var t1 = 0;
//----------------------Start Window loading event---------------------------
$(window).load(function () {
//print links once
$.each(stuff, function(index, out) {
$( "#text" ).append( "<p id='" + out[0] + "'>" + out[0] + " - " + out[1] + "</p>" );
});
//-----------------AnimationFrameMeasure
//loading text 0 50 times
for ( var i = 0; i < nprint; i++ ) {
$( "#testbox" ).append( "<p id='" + stuff[0][0] + "'>" + stuff[0][0] + " - " + stuff[0][1] + "</p>" );
}
function loop(t) {
var diff = lastTime - t;
lastTime = t;
t0 = window.performance.now();
//loading text 50 times
for ( var i = 0; i < nprint; i++ ) {
$( "#testbox" ).append( "<p id='" + stuff[0][0] + "'>" + stuff[0][0] + " - " + stuff[0][1] + "</p>" );
}
// push time
t1 = window.performance.now();
stuff[0].push(t1-t0);
if (count >= 0) {
requestAnimationFrame(loop);
}
count = count - 1;
}
requestAnimationFrame(loop);
//-------------------------print results-----------------------
alert(stuff);
$.each(stuff, function(index, link) {
$.each(link, function(data, value) {
$( "#resultbox" ).append(" | " + value);
});
$( "#resultbox" ).append("<br />");
});
//--------------------------End Window loading even ------------
});
</script>
<body>
<h2>Text Overview</h2>
<div id="text"></div>
<h2>Result Box</h2>
<div id="resultbox"></div>
<h2>TestBox</h2>
<div id="testbox"></div>
</body>
最佳答案
- 您缺少
</body>标签 - 第 37 行:
loop(t)- 您可能打算写function loop(t)
顺便说一句，一旦进行了这些更改，它似乎就会无限循环，不断地打印。
更加熟悉浏览器的调试器。它很可能为您提供了足够的信息来发现#2，因为它提示意外的 {在第 38 行。
关于javascript - RequestAnimationFrame API - 测量单个元素的加载时间 - 页面不再加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20175343/