わかりました、私はあなたの問題を解決しました。これがあなたが私に送ったコードです（部分的に貼り付けられています）：
<script type="text/javascript">
$(document).ready(function(){
$.getJSON("demonew2.json",function(data){
$.each(data,function(key,value){
$("#topmost").append('<div>'+key+'</div>');
if(data.hasOwnProperty(key)){
//alert(key);
var total = new Array();
for(var i=0; i<4; i++){ // Here 4 should be something like counts of the keys, as in this json file it is 4
total[i] = key;
$("#topmost").append('<div>'+total+'</div>');
setInterval (function(){alert(key)},5000);
// I NEED THE DATA TO BE LOADED KEY BY KEY, SAY AFTER PAGE LOAD IT WILL DISPLAY THE VALUES OF key_1, THEN AFTER 5 SECONDS<br />
// IT SHOULD DISPLAY key_2 VALUES AND SO ON.
}
}
});
});
});
</script>
</head>
<body>
<div style="background:#ccc; border:2px solid #ccc; padding:10px;" id="topmost"></div>
</body>
コードに配置する 2 つの主要な問題があります。
1) 遅延後にジョブを実行する場合は、指定された間隔でジョブを繰り返す「setInterval」ではなく、「setTimeout」を使用する必要があります。2) すべてのジョブに同じ遅延量を使用すると、それらがほぼ同時に実行されるため、遅延量を増やす必要があります。
さらに、setTimeout または setInterval メソッドが新しいスレッドを開始し、クロススレッドの値の注入で異常な動作が発生する可能性があるため、値を直接 setTimeout または setInterval メソッドに渡すことはお勧めできません。そのため、プロキシ関数を使用して直接注入を回避することをお勧めします。最終的な作業コードは次のとおりです。
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("demonew2.json", function (data) {
var delay = 0;
$.each(data, function (key, value) {
delay += 5000;
showData(key, value, delay);
});
});
});
function showData(key, value, delay) {
setTimeout(function () {
$("#topmost").append('<div>' + key + " = " + JSON.stringify(value) + '</div>');
}, delay);
}
</script>
</head>
<body>
<div style="background:#ccc; border:2px solid #ccc; padding:10px;" id="topmost"></div>
</body>
これで問題が解決したかどうかをお知らせください。楽しむ。;)
更新:簡単に使用できるようにページ全体のコードを追加し、追加部分を少し変更してフェード効果を持たせ、もう少し楽しくしました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("demonew2.json", function (data) {
var delay = 0;
$.each(data, function (key, value) {
delay += 5000;
showData(key, value, delay);
});
});
});
function showData(key, value, delay) {
setTimeout(function () {
$("#topmost").fadeOut(function() {
$("#topmost").append('<div>' + key + " = " + JSON.stringify(value) + '</div>').fadeIn();
});
}, delay);
}
</script>
</head>
<body>
<div style="background:#ccc; border:2px solid #ccc; padding:10px;" id="topmost"></div>
</body>
</html>