表單，只有在以前成功時纔會運行多個函數

我有一個表單，其中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"); 
}

來源

2013-05-01 MultiformeIngegno

看來它不是一個運行功能如果另一種是成功的，但異步操作完成後。在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-01 22:21:00 bfavaretto

工程就像一個魅力！：D謝謝！如果由於某種原因異步操作沒有完成，是否有可能創建瀏覽器彈出錯誤？ – MultiformeIngegno 2013-05-01 22:35:09

也許，但我不知道如何。谷歌文檔可能會提供一個例子。 – bfavaretto 2013-05-01 22:43:28

我會搜索！再次感謝！ :) – MultiformeIngegno 2013-05-01 22:44:33

當你說「成功運行」你的意思完成？這是有保證的，因爲你的onsubmit基本上就像一個函數體。你不告訴onsubmit並行運行或給它一個列表;相反，你只是依次執行它們。

來源

2013-05-01 20:22:18 Jacob

你可以改變你的功能返回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時，&&鏈停止。

來源

2013-05-01 20:26:40 tessi

表單，只有在以前成功時纔會運行多個函數

回答

相關問題