当这些 JavaScript 函数触发时,我是否正确地在计时中使用了 setTimeout()

Am I using setTimeout() correctly in timing when these javascript functions fire?

本文关键字:setTimeout 正确地 是否 JavaScript 函数      更新时间:2023-09-26

我正在使用Google Maps API v3创建一个交互式地图,地图上有标记,当您单击标记时会打开信息窗口。该过程是创建一个标记,创建一个信息窗口,然后单击将两者绑定(该事件还将关闭任何其他打开的信息窗口)。

这工作得很好。

我希望标记连续

下降,因此我添加了一个延迟,该延迟根据每个标记的计数而增长。

完成此操作后,我注意到单击事件无法找到创建的标记。 我认为这是因为标记尚未创建,因为它们仍处于延迟状态。

我的解决方案是向绑定函数添加一个延迟,等于最后一个标记的延迟 + 一点额外的时间。

我的问题是,这是否是控制这种情况的最佳方法?

伪代码概述:

function mapInit(){
    google create map code;
    //Begin First PHP loop, pulls all information in
    setTimeout(function(){  //PHP loop iteration 1
        create marker1;
        create window1;
    }, 1 * 150);
    setTimeout(function(){  //PHP loop iteration 2
        create marker2;
        create window2;
    }, 2 * 150);
    setTimeout(function(){  //PHP loop iteration 3
        create marker3;
        create window3;
    }, 3 * 150);
                            //end first PHP loop
    function createListeners(){
        //begin second PHP loop over markers
        google.maps.event.addListener(marker1, 'click', function() {  //iteration 1
            //internal loop over windows and if for each window
            open window1;  //if is true, open instead of close
            close window2;
            close window3;
        }
        google.maps.event.addListener(marker2, 'click', function() {  //iteration 2
            //internal loop over windows and if for each window    
            open window2;
            close window1;
            close window3;
        }
        google.maps.event.addListener(marker3, 'click', function() {  //iteration 3
            //internal loop over windows and if for each window
            open window3;
            close window1;
            close window2;
        }
    }
    setTimeout(function() {
        createListeners();
    }, 3 * 150 + 100);}
}
on window.load call mapInit();

更多详情:

JavaScript 是在 PHP 中动态创建的。我从外部源中提取标记和窗口信息,当我循环访问时,标记和窗口信息被写入,并且在该循环结束时,侦听器全部创建。

当脚本在页面加载时实际运行时,它会在每个标记/窗口创建之间超时。 一旦做了一个标记,它就会被加载到地图上。 如果我将标记/窗口addListener放在相同的超时中,它将看不到创建后要创建的标记/窗口,因此addListener将不完整。

这些在 PHP 中动态生成并不重要,因为最终 JavaScript 永远不会注意到。由于您在setTimeout结束时已经创建了marker-xwindow-x,因此向它们添加事件侦听器应该是可行的:

setTimeout(function(){
    create marker1;
    create window1;
    google.maps.event.addListener(marker1, 'click', function() {
        open window1;
        close window2;
        close window3;
    };
}, 1 * 150);

如果你不知道会有多少项目,你可以在PHP中跟踪它,然后将这些信息传递给JavaScript(例如 echo "var numOfItems = " . $numItems . ";";