设置一个计时器，在N秒后提交表单，如果谷歌地图地理代码没有返回

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

本文关键字：谷歌地图 如果 表单 返回 代码 提交 一个 计时器 设置      更新时间：2023-09-26

我有一个地方自动完成对象在我的搜索框。

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

我还为'place_changed'设置了一个监听器事件，并在其中调用maps。geocoder对字符串进行搜索，如果自动完成没有任何结果。我担心的是，如果地理代码永远不会返回(例如链接下降)，我卡住不调用表单提交。问题-我应该有一个定时器设置，所以如果过了一定的时间，如果地理编码的结果还没有回来，我可以超时和调用表单提交?如果有，我该怎么做呢?我担心的是，如果我超时调用表单提交，那是1个调用，然后地理编码结果返回并提交，那是2个调用。

这是我的事件监听器。

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();
    });
  }
});

您可以在提交geocode请求之前启动计时器，并让计时器设置一个标志，以便geocode请求在执行其代码之前进行检查。

如果geocode在计时器之前成功运行，则运行clearTimeout以阻止计时器执行。

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();
    });
  }
});

我想这样做可能会起作用

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);
  }
});

这是我的工作解决方案。

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();
      }
    });
  }
});

相关文章：