当这些 JavaScript 函数触发时,我是否正确地在计时中使用了 setTimeout()
Am I using setTimeout() correctly in timing when these javascript functions fire?
我正在使用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-x
和window-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 . ";";
)
相关文章:
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- 如何正确地使这个js片段内容不可知
- 如何正确地将参数传递给RequireJS回调函数
- 如何正确地在页面外编写DFP广告单元
- 如何正确地将数据发送到打开的Firefox侧边栏
- jQuery:如何正确地暂停递归
- 承诺-如何正确地将错误附加到此示例
- 如何正确地原型JS子伪类
- 如何正确地以无限滚动浏览网页
- Photoswipe 4:如何正确地禁用“;getThumbBoundsFn"在支持IE8的纯VanillaJ
- 我不知道如何正确地将REST响应对象传递给ReactJS子组件
- 如何正确地将jquery插件添加到webpack中的jquery对象中
- 如何正确地将数据从自定义服务传递到角度控制器
- 如何正确地从数组中删除对象
- 如何正确地包含带有参数的谷歌地图API
- 如何正确地将第二个变量传递给ajax调用
- 如何正确地通过angularjs服务连接到套接字
- 如何正确地包含jasmine节点测试运行程序的源文件
- 当这些 JavaScript 函数触发时,我是否正确地在计时中使用了 setTimeout()
- 如何正确地让浏览器在使用setTimeout的循环中间进行更新