Question

我有一个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" );
}

Answer 1

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

Answer 2

您可以更改功能以返回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时，才会计算第二个参数。因此，&& - 链在第一个函数返回false时停止。

Answer 3

似乎不是关于运行一个函数如果另一个函数是成功的，而是在异步操作完成后。在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元素的其他方法。

表单，仅在以前成功时才提交多个函数

3 个答案: