0

我有一个 onsubmit 执行某些功能的表单。我怎么能确定 func2(); 仅在 func1(); 时执行 运行成功？和 func3(); 只有当 2 和 1 做到了？

<form onsubmit="func1();func2();func3(); return false">
    <input type="text" id="start" name="start">
    <input type="submit" value="Go">
</form>

例如，其中一个功能如下：

<script src="https://maps.googleapis.com/maps/api/js?&amp;sensor=false&amp;region=it&amp;libraries=places"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myLatlng = new google.maps.LatLng(41.88994,12.51383);

var mapOptions = {
    zoom:16,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: myLatlng,
    styles: [
        {
            featureType: "poi.business",
            elementType: "labels",
            stylers: [
                    { visibility: "off" }
            ]
        }
    ]
  }

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));

var input = document.getElementById('start');
var options = {
    types: ['geocode'],
    componentRestrictions: {country: 'it'},
    rankBy: google.maps.places.RankBy.DISTANCE
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.bindTo('bounds', map);

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Studio medico'
});
}

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = "Via Tiburtina 500, Roma";
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.TRANSIT
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

其他2个是：

function boxappear() {
document.getElementById("percorsolink").style.display="none";
document.getElementById("percorsoform").style.display="inline";
}

function reducemap() {
document.getElementById("map-canvas").style.width="620px";
google.maps.event.trigger( map, "resize" );
}
4

3 回答 3

0

当您说“运行成功”时，您的意思是完成了吗？这是有保证的，因为你onsubmit基本上就像一个函数体。您不是在告诉onsubmit并行运行这些函数或给它一个列表；相反，您只是按顺序执行它们。

于 2013-05-01T20:22:18.567 回答
0

您可以将函数更改为返回true（成功）或false（出现问题）。

function func1() {
  // do something
  return true;
}

function func2() {
  // do something
  if (!'someThingWentWrong') { return fale; }
  return true;
}

...

然后在你的表单中链接你的函数：

<form onsubmit="func1() && func2() && func3(); return false">
    <input type="text" id="start" name="start">
    <input type="submit" value="Go">
</form>

是运算&&符and。它首先评估它的第一个参数，并且只有当第一个参数是true第二个参数时才被评估。因此，&&-chain 在第一个函数返回时停止false。

于 2013-05-01T20:26:40.183 回答
0

如果另一个功能成功，似乎不是关于运行一个功能，而是在完成异步操作之后。中calcRoute，路由计算API调用是异步的；这意味着该函数将在完成创建路由之前返回。directionsService一种解决方案是修改calcRoute以进行回调：

function calcRoute(callback) {
    var start = document.getElementById('start').value;
    var end = "Via Tiburtina 500, Roma";
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.TRANSIT
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);

        // If a callback was passed, run it
        if(typeof callback === "function") {
            callback();
        }

      }
    });
}

然后更改您的函数调用以传递回调：

<form onsubmit="calcRoute(function(){ boxappear(); reducemap(); }); return false">

旁注：我不建议在 HTML 属性中内联代码，因为它混合了结构和行为，并且也可能变得难以维护；我建议研究将事件附加到 DOM 元素的其他方法。

于 2013-05-01T22:21:00.350 回答