Setting a timer after N seconds to submit form if google maps geocode doesn't return

问题

I have a place autocomplete object on my search box.

var navbarAutocomplete = new window.google.maps.places.Autocomplete(navbarInput, navbarOptions);

I also have a listener event for 'place_changed' and in that I call maps.geocoder to do a search on the string IF autocomplete doesn't have any results. My concern is that if geocode never returns (ex. the link is down), I'm stuck not calling form submit. Question - should I have a timer set so if after a certain time, if the geocode results haven't come back I can timeout and call form submit? If so how would I do that? My concern is that if I timeout an call form submit, that's 1 call, then the geocode results return and submit, that'2 2 calls.

Here is my event listener.

google.maps.event.addListener(navbarAutocomplete, 'place_changed', function() {
  var searchedPlace = navbarAutocomplete.getPlace();

  if (searchedPlace.geometry === undefined) {
    $("#latitude").val(searchedPlace.geometry.location.G);
    $("#longitude").val(searchedPlace.geometry.location.K);
    $("#mapType").val(searchedPlace.types[0]);
    $('form')[0].submit();
  } else {
    var navbarGeocoder = new google.maps.Geocoder();
    navbarGeocoder.geocode({
      'address': navbarInput.value
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

        $("#latitude").val(results[0].geometry.location.G);
        $("#longitude").val(results[0].geometry.location.K);
        $("#mapType").val(results[0].types[0]);
      }
      $('form')[0].submit();
    });
  }
});

回答1:

You can start a timer right before you submit the geocode request and have the timer set a flag that the geocode request checks before it executes its code.

If the geocode successfully runs before the timer, then run clearTimeout to prevent the timer from executing.

google.maps.event.addListener(navbarAutocomplete, 'place_changed', function() {
  var searchedPlace = navbarAutocomplete.getPlace();

  if (searchedPlace.geometry === undefined) {
    $("#latitude").val(searchedPlace.geometry.location.G);
    $("#longitude").val(searchedPlace.geometry.location.K);
    $("#mapType").val(searchedPlace.types[0]);
    $('form')[0].submit();
  } else {
    var navbarGeocoder = new google.maps.Geocoder();
    var timedOut = false; // indicates if timer code has run
    var timerId = setTimeout(function() {
      timedOut = true;
      // submit form
    }, 10000);


    navbarGeocoder.geocode({
      'address': navbarInput.value
    }, function(results, status) {
      if (false === timedOut && status == google.maps.GeocoderStatus.OK) {
        clearTimeout(timerId); //prevent timer code from running
        $("#latitude").val(results[0].geometry.location.G);
        $("#longitude").val(results[0].geometry.location.K);
        $("#mapType").val(results[0].types[0]);
      }
      $('form')[0].submit();
    });
  }
});

回答2:

I think something like this might work

google.maps.event.addListener(navbarAutocomplete, 'place_changed', function() {
  var searchedPlace = navbarAutocomplete.getPlace();

  if (searchedPlace.geometry === undefined) {
    $("#latitude").val(searchedPlace.geometry.location.G);
    $("#longitude").val(searchedPlace.geometry.location.K);
    $("#mapType").val(searchedPlace.types[0]);
    $('form')[0].submit();
  } else {
    var timedOut = false;
    var formSubmitted = false;
    var navbarGeocoder = new google.maps.Geocoder();
    navbarGeocoder.geocode({
      'address': navbarInput.value
    }, function(results, status) {
      if (!timedOut) {
        if (status == google.maps.GeocoderStatus.OK) {
          $("#latitude").val(results[0].geometry.location.G);
          $("#longitude").val(results[0].geometry.location.K);
          $("#mapType").val(results[0].types[0]);
        }
        formSubmitted = true;
        $('form')[0].submit();
      }
    });

    var timerId = setTimeout(function() {
      timedOut = true;
      alert('Request timed out.');
      if (!formSubmitted) {
        $('form')[0].submit();
      }
    }, 3000);
  }
});

回答3:

Here is my working solution.

google.maps.event.addListener(navbarAutocomplete, 'place_changed', function() {
  var searchedPlace = navbarAutocomplete.getPlace();

  if (searchedPlace.geometry === undefined) {
    $("#latitude").val(searchedPlace.geometry.location.G);
    $("#longitude").val(searchedPlace.geometry.location.K);
    $("#mapType").val(searchedPlace.types[0]);
    $('form')[0].submit();
  } else {
    var navbarGeocoder = new google.maps.Geocoder();
    var timedOut = false; // indicates if timer code has run
    var timerId = setTimeout(function() {
      timedOut = true;
      // submit form
      $('form')[0].submit();
    }, 3000);

    navbarGeocoder.geocode({
      'address': navbarInput.value
    }, function(results, status) {
      if (timedOut === false) {
        clearTimeout(timerId);
        if (status == google.maps.GeocoderStatus.OK) {
          $("#latitude").val(results[0].geometry.location.G);
          $("#longitude").val(results[0].geometry.location.K);
          $("#mapType").val(results[0].types[0]);
        }
        $('form')[0].submit();
      }
    });
  }
});

来源：https://stackoverflow.com/questions/32159827/setting-a-timer-after-n-seconds-to-submit-form-if-google-maps-geocode-doesnt-re