Question

我是jQuery和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);

    };





   });

感谢您的帮助。

Answer 1

我认为问题在于这一行：

 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);

Answer 2

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

您的意思是setTimeout()吗？

Answer 3

我认为问题是for循环中的map变量。与许多其他类C语言不同，JavaScript中的变量的范围是函数，而不是块。这意味着map变量在循环中创建的所有闭包之间共享。当循环结束时，map变量指向最后一个索引，并且所有回调都将使用最后一个索引。

您可以创建一个函数并立即执行它以关闭地图变量，如下所示：

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

Javascript循环陌生 - 不会停止，只有

3 个答案: