Question

这是我的js代码，我正在阅读一个文本文件＆amp;在地图上显示每个位置我的要求是我想延迟两个位置，现在我一次显示所有

请帮我解决这个问题

  <script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Fmjtd%7Cluurn90a25%2Cal%3Do5-9wt20f"></script>

  <script type="text/javascript">

  /*An example of using the MQA.EventUtil to hook into the window load event and execute defined function
  passed in as the last parameter. You could alternatively create a plain function here and have it
  executed whenever you like (e.g. <body onload="yourfunction">).*/

  function FileHelper()
    {}
    {
        FileHelper.readStringFromFileAtPath = function(pathOfFileToReadFrom)
        {
            var request = new XMLHttpRequest();
            request.open("GET", pathOfFileToReadFrom, false);
            request.send(null);
            var returnValue = request.responseText;

            return returnValue;
        }
    }

    var pathOfFileToRead = "LatLon.txt";

    var contentsOfFileAsString = FileHelper.readStringFromFileAtPath
    (
        pathOfFileToRead
    );
    var contentsArray=new Array();
    var contentsArray = contentsOfFileAsString.split('\n');  




    function main()
    {
        for(i=0;i<contentsArray.length;i++)
        {

            addMarker();
            setTimeout(function() {remveh1();}, 2000);  


        }

    }


    function addMarker()
    {
        console.log(contentsArray[i]);
        split_contentArray=contentsArray[i].split(',');
        vehicle_lat=split_contentArray[0];
        vehicle_lng=split_contentArray[1];


         var vehicle = new MQA.Poi({ lat: vehicle_lat, lng: vehicle_lng });
         var icon = new MQA.Icon('https://cdn2.iconfinder.com/data/icons/gpsmapicons/blue/gpsmapicons07.png', 26, 26);          

         vehicle.setIcon(icon);
         vehicle.setKey("abc");


         map.addShape(vehicle);

        vehicle.setRolloverContent("Vehicle # KA05 9999");

     }




    function remveh1()
    {
        map.removeShape(map.removeShape(map.getByKey("abc"))); 
    };     




  MQA.EventUtil.observe(window, 'load', function() {

    /*Create an object for options*/
    var options={
      elt:document.getElementById('map'),        /*ID of element on the page where you want the map added*/
      zoom:12,                                    /*initial zoom level of map*/
      latLng:{lat: 12.922050, lng: 77.559933},   /*center of map in latitude/longitude*/
      mtype:'osm'                                /*map type (osm)*/
      };

    /*Construct an instance of MQA.TileMap with the options object*/
    window.map = new MQA.TileMap(options);

    MQA.withModule('route','routeio','largezoom','mousewheel','viewoptions',function() {



      /*Creates an MQA.RouteIO instance giving the endpoint of our new Directions Service as the
      first parameter and true that we will not use a proxy as the second (enables JSONP support to
      avoid server side proxies for route request and results communication).*/

      var io = new MQA.RouteIO(MQROUTEURL,true);

      /*Creates an MQA.RouteDelegate for defining default route appearance and behavior.*/
      delegate = new MQA.Route.RouteDelegate();

      /*The delegate is also required to customize the pois, in this sample adds rollover content*/

      var strContent = new String();
      strContent += "<b>Click <a target='_blank' href='javascript:upgradetostop()'><font color='#0021FF'>to convert to 'stop'</font></a> </b>";


        delegate.customizePoi = function(thePoi) {
        thePoi.setRolloverContent("Stop # : " + thePoi.stopNumber);
        thePoi.setInfoContentHTML(strContent);

        };  

      /*Creates an MQA.RouteController for managing the route while it is on the map. A key function of the route
      controller is to provide dragging capabilities to a route. The last parameter here is optional and is what is used
      to determine if the route should be draggable (this will be true by default if not provided).*/
    routeController= map.createRoute(delegate,io,{routeOptions:{routeType:'fastest'},ribbonOptions:{draggable:true, draggablepoi:true,ribbonDisplay:{color:"#00FF40", colorAlpha:0.35}}});


      /*Executes the route request back to our Directions Service.*/
      io.route({

        /*First parameter to the MQA.RouteIO.route function defines the route request.*/
        locations: [
           { latLng: { lat: 12.906582, lng: 77.572326 },type:'s'},{ latLng: { lat: 12.92190, lng: 77.56022 },type:'s'},{ latLng: { lat: 12.88959, lng: 77.45314 },type:'s'} 

       ], 
        mapState: routeController.delegate.virtualMapState(map)
       },

      /*The second parameter to the MQA.RouteIO.route function defines the IO settings.*/
      { timeout: 10000 },

      /*The final parameter to the MQA.RouteIO.route function is the callback function to execute
      the IO request as completed.*/
      function(results) {

        /*Takes the results of the route request and applies them to the map. The route ribbon will
        be drawn on the map along with the placement of POI's at each point.*/
        routeController.setRouteData(results.route);


        /*Change the map to display a best fit of the data.*/
        map.bestFit();


      });                                                                                                                                                     
                        map.addControl(
                        new MQA.LargeZoom(),
                        new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5)));   

                        map.enableMouseWheelZoom();

                        map.addControl(new MQA.ViewOptions());
      });     

  });

  </script>

<div id='map' style='width:750px; height:280px;'></div>

   <button id="getBasicSample" onclick="main();">show veh1</button>

Answer 1

您的示例代码很长，我无法确定您想要延迟哪个函数，但作为一般指导，您可以在Javascript中使用setTimeout来延迟运行某些代码。

在下面的示例中，脚本会立即输出'first'，然后在一秒后输出'second'。

function run_first() {
  console.log('first');
}

function run_second() {
  console.log('second');
}

run_first(); // runs function run_first straight away
setTimeout(run_second, 1000); // delays calling function run_second for 1000ms (1 second)

Answer 2

您可以使用以下代码在短时间内模拟睡眠：

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

现在，如果你想睡1秒钟，只需使用：

sleep(1000);

如何在javascript中的函数之间延迟？

2 个答案: