Javascript的循環奇怪 - 不會停止，只有

我對jQuery和JavaScript相當新，所以原諒我，如果我忽略了一些非常明顯的東西。Javascript的循環奇怪 - 不會停止，只有

基本上，我想要做的是加載一個json文件，然後爲json數組中的每個項目顯示其內容幾秒鐘，然後移動到數組中的下一個項目。

但是，發生的事情是，循環永遠不會結束，它似乎不斷循環數組中的最後一項。

這是我的代碼。包括我在評論中試過的一些：

var maps; 
    var isInitialView; 
    $(document).ready(function() { 



    //$.getJSON("/Services/Maps.svc/GetMaps", callback); 

    $.ajax({ 
     url: "/Services/Maps.svc/GetMaps", 
     dataType: 'json', 
     async: false, 
     success: callback 
    }); 


    function callback(data) { 
     console.log("inside callback"); 
     maps = data; 
     isInitialView = true; 
     rotateMapDetails(); 
    }; 


    $.ajaxSetup({ cache: false, async: false }); 

    // $.getJSON("/Services/Maps.svc/GetMaps", 
    //  function (data) { 
    //   isInitialView = true; 
    //   maps = data; 
    //   //   for (var map in maps.d) { 
    //   //    alert(map.MapName); 
    //   //    $('#accordion').delay(delay).fadeIn(400, populateMapDetails(map)).fadeOut(400); 
    //   //   } 
    //   //   //rotateMapDetails(); 
    //   //   $.each(maps.d, function (key, map) { 
    //   //    var delay = 1000; 
    //   //    //alert("inside getJson loop, and mapName is :" + map.MapName); 
    //   //    //$('#accordion').delay(delay).fadeIn(400, populateMapDetails(map)).fadeOut(400); 
    //   //    //    sleep(delay); 
    //   //    setInterval(function() { 
    //   //     populateMapDetails(map); 
    //   //    }, 5000); 
    //   //    //populateMapDetails(map); 
    //   //$('#accordion').fadeOut(400); 
    //   //    sleep(delay); 
    //   // }); 
    //   //rotateMapDetails(); 
    //   console.log("inside getJson"); 
    //  }); 

    $('#accordion').load(function() { 
     alert("accordion loaded"); 
     rotateMapDetails(); 
    }); 

    function rotateMapDetails() { 
     var size = $(maps.d).length; 
     console.log("maps.d has " + size + " elements"); 


     var delay = 4000; 

       for (var map in maps.d) { 
        console.log("inside for loop"); 
        console.log(maps.d[map]); 
        setInterval(function() { 
         populateMapDetails(maps.d[map]); 
             }, delay); 
       } 



    //    for (var i=0;i<=size;i++) 
     //     { 
     //      setInterval(function() { 
     //       console.log(maps.d); 
     //       console.log(maps.d[i]); 
     //          populateMapDetails(maps.d[i]); 
     //         }, delay); 
     //     }; 



     //  $(maps.d).each(function (map) { 
     //   if (isInitialView) { 
     //    //var map = $(this); 
     //    var delay = 4000; 
     //    setInterval(function() { 
     //     console.log("inside rotateMapDetails and map is " + map.MapName); 
     //     populateMapDetails(map); 
     //    }, delay); 
     //   } 
     //   else { return (false); }; 
     //   isInitialView = false; 
     //   return (false); 
     //  }); 
    }; 


    $('.ic_container').click(function() { 
     $('#accordion').fadeIn(400); 
     var mapName = jQuery("img", this).attr("alt") 
     isInitialView = false; 

     $.each(maps.d, function (key, map) { 
      if (map.MapName === mapName) { 

       populateMapDetails(map); 
      } 
     }); 
     var id = $(this).attr("id"); 
    }); 

    //populate side bar with map details 
    function populateMapDetails(map) { 
     console.log("populating mapDetails for " + map.MapName); 

     //$('#accordion').delay(delay).fadeIn(400); 
     $("#MapName").html(map.MapName); 
     $("#Description").html(map.Description); 
     $("#DirectLinklink").attr("href", map.MapUrl); 
     var imgSrc = map.MapName; 
     var src = imgSrc.replace(/\s/g, ""); //remove white space 
     $("#detailImg").attr("src", "Images/MapThumbs/" + src + ".png"); 
     $("#LaunchLink").attr("href", map.MapUrl); 
     $("#txtEmbed").val(map.EmbedLink); 

     //alert(map.MapName); 
     //$('#accordion').delay(delay).fadeOut(400); 

     //setInterval(function() { console.log("inside populateMapDetails"); }, delay); 

    }; 





    });

感謝您的幫助。

來源

2011-05-12 Magick

我只是脫脂的代碼，但你使用setInteval，這將循環，直到你做一個clearInterval ，這是無處可去的。 – 2011-05-12 14:13:44

既然你提到你是JavaScript的新手，你可以在Firefox上使用[firebug]（http://getfirebug.com/）來調試JavaScript。 – 2011-05-12 14:14:00

是的，謝謝。但是，我一直在運行firebug時遇到了很多麻煩。所以我在Chrome中使用JavaScript控制檯和調試器。這非常有幫助。但我仍然不知道爲什麼.delay（）（來自jquery），setInterval（）和setTimeout（）似乎沒有效果。 – Magick 2011-05-13 09:01:28

我認爲這個問題是這一行：

setInterval(function() { 
       populateMapDetails(maps.d[map]); 
           }, delay);

什麼你告訴它做的是執行populateMadDetails每隔幾秒鐘的功能。所以它會爲您的每個地圖項目執行此操作。你想要它做什麼？

在你的問題，你說你希望它：

load a json file, then for each item in the json array, display its 
內容幾秒鐘，然後移動到數組中的下一個項目。

因此，在這種情況下，你想要做這樣的事情：

populateMapDetails(maps.d[map]) 
setTimeout(..., delay);

來源

2011-05-12 14:19:21

我嘗試過setTimeOut（）和setInterval（） - 但都給出了相同的奇怪結果。結果是現在數組中的每個項目都被迭代 - 作爲循環應該做的 - 但它的setTimeOut或setInteval被忽略。該循環執行時沒有任何暫停或延遲。 – Magick 2011-05-13 08:47:35

setInterval(function() { 
     populateMapDetails(maps.d[map]); 
     }, delay);

你的意思setTimeout()？

來源

2011-05-12 14:24:29

我嘗試過setTimeOut（）和setInterval（），我仍然得到相同的奇怪結果。 – Magick 2011-05-13 08:47:03

我相信問題是for循環中的map變量。與許多其他C類語言不同，JavaScript中的變量被限定爲函數，而不是塊。這意味着map變量在循環中創建的所有閉包之間共享。當循環結束時，map變量指向最後一個索引，並且所有回調將使用最後一個索引。

您可以創建一個函數並執行它馬上關閉過這樣的地圖變量：

setInterval((function(map) { 
    return function() { 
     populateMapDetails(maps.d[map]); 
    }; 
})(map), delay);

來源

2013-04-28 22:59:02 Omnimike

Javascript的循環奇怪 - 不會停止，只有

回答

相關問題