将参数向下传递给嵌套函数 Google Maps v3

Question

很抱歉这里是新手问题，但我是 javascript 的新手。理想情况下，我想调用 myLoop(latLong);但是除非我在函数之外创建变量，否则我似乎无法让 .setPosition() 识别变量。

    var x = 0;
    var y = 0;
    var z = 0;
    var v = 0;

    function xy(a,b,c,d) {
        var longDistance = Math.abs(a-d);
        var longTime = longDistance/0.1*0.5;            
        var latDistance = b-c;
        var latRate = latDistance/longTime*0.5;
        x = a; //origin long
        y = b; //oringin lat
        z = latRate;
        w = d; //destination long
        v = c; //destination lat
    }

    function myLoop () {        
        setTimeout(function () {
            var latLong = new google.maps.LatLng(y,x);
            marker.setPosition(latLong); 
            x = x + 0.1;
            y = y - z;
            if (x < w && y < v) { 
                myLoop();
            } else {

                alert('finished');

            }
        }, 0.5)
    }

    xy(-118,33,40,-73);
    myLoop();

Answer 1

您只需将 latLong 变量递归传递给 myLoop() 函数即可。

为此，您可以在函数外创建第一个 latLong 变量，然后调用函数（传入第一个 latLong 变量），然后在 latLong 函数内检查条件，如果需要再次调用 myLoop 函数，更新 latLong 变量，然后再次调用 myLoop 函数。

递归代码如下所示：

var x = 0;
var y = 0;
var z = 0;
var v = 0;

// Your first latLong
var latLong = new google.maps.LatLng(y,x);

function xy(a,b,c,d) {
    // ...
}

// Pass in the latLong variable
function myLoop (latLong) {        
        setTimeout(function () {
            marker.setPosition(latLong); 
            x = x + 0.1;
            y = y - z;
            if (x < w && y < v) { 
                
                // now create a new latLong, and pass it 
                // back into this function recursively
                latLong = new google.maps.LatLng(y,x);
                myLoop(latLong);

            } else {
                alert('finished');
            }
        }, 0.5)
    }

xy(-118,33,40,-73);

// Now call the myLoop function to get the recursion started
myLoop(latLong);

或者，您可以将所有代码打包到一个函数中

使用 revealing module pattern，您可以将所有循环功能包装在一个地方（在一个名为 latLongGenerator 的函数对象中），允许在您的代码逻辑中进行很好的分离，但仍然提供你一个干净的界面使用。重组后的“揭示模块”代码如下所示：

var latLongGenerator = (function () {
    
   var x = 0;
   var y = 0;
   var z = 0;
   var v = 0;
   var latLong;
    
   function setXY(a,b,c,d) {
      var longDistance = Math.abs(a-d);
      var longTime = longDistance/0.1*0.5;            
      var latDistance = b-c;
      var latRate = latDistance/longTime*0.5;
      x = a; //origin long
      y = b; //oringin lat
      z = latRate;
      w = d; //destination long
      v = c; //destination lat
      
      // pass in the initial latLong to myLoop(latLong) from here
      latLong = new google.maps.LatLng(y,x);
      myLoop(latLong);
    }
    
    // This is the only function that will
    // be exposed publicly on this function
    // Example usage: latLongGenerator.startLoopWith(0,0,0,0);
    function startLoopWith(a,b,c,d){
       setXY(a,b,c,d);
       
    }
    
    function myLoop (latLong) {        
        setTimeout(function () {
            marker.setPosition(latLong); 
            x = x + 0.1;
            y = y - z;
            if (x < w && y < v) {
                // recursively call the loop from here
                latLong = new google.maps.LatLng(y,x);
                myLoop(latLong);
            } else {
                alert('finished');
            }
        }, 0.5);
    }
    
    return {
        startLoopWith:startLoopWith
    };
    
})();

// Finally, you can start your loop by passing in
// your initial values to latLongGenerator.startLoopWith(...)
latLongGenerator.startLoopWith(-118,33,40,-73); 

此结构为您提供了一种简洁的方式来封装所有计算逻辑，同时还为您提供了一个漂亮、干净的入口点。使用这个新的重构，你可以从一行开始你的循环：

latLongGenerator.startLoopWith(-118,33,40,-73); 

我没有测试过这段代码，但它应该可以帮助您走上正轨。

希望对您有所帮助！