Javascript 设置搜索超时

我有这个功能，它向服务器发出请求以获取数据

这是它的代码

export default class StatusChecker {
  constructor() {
    if (gon.search && gon.search.searched) {
      this.final_load();
    } else {

      this.make_request(this);
    }
  }


  private make_request(context: StatusChecker) {
  let myrequest;
  myrequest = $.ajax({
      url: "/search/status",
      type: "GET",
      context: context,
      data: {
        search_id: gon.search["id"]
      },
      success: this.handle_response,
      error: this.handle_response_error
    });
    var t= setTimeout(function(){ myrequest.abort();}, 30000);
  }

  private handle_response(data): void {
    if (data == "ready") {
      this.request_itineraries();
    } else {
      setTimeout(() => this.make_request(this), 500);
    }
  }

  private handle_response_error(): void {
    $("#step_1_ajax_error").fancybox({
      afterClose() {
        return Helpers.navigate("/");
      }
    });
  }

  private request_itineraries(): void {
    $.ajax({
      url: "/search/itineraries",
      type: "GET",
      context: this,
      data: {
        search_id: gon.search["id"]
      },
      success: this.handle_request_itineraries
    });
  }

  private handle_request_itineraries(data): void {
    if (data.html.indexOf("step_1_search_error") > 0) {
      Track.log_event("Show error screen", data.html);
      $.fancybox.open($("#step_1_search_error"), {
        afterClose() {
          if (
            gon.links !== null &&
            gon.links.last_search !== null
          ) {
            return Helpers.navigate(gon.links.last_search);
          } else {
            return Helpers.navigate("/");
          }
        }
      });
    } else {
      // Update gon!
      gon = data.gon;

      $(".step_1_body").html(data.html);
      $("#searching").hide();
      $(".search_box_overlay").hide();
      $(".search_box_overlay_top").hide();

      this.final_load();
    }
  }

  private final_load(): void {
    if (gon.debug_enabled) {
      ItinerariesResult.load_debug();
    }

    Filter.load();
    Banners.load();
    ItinerariesResult.load();

    setTimeout(() => State.hide_searchfield(), 100);
  }
}

但我面临着这个问题

问题是，如果出于某种原因，服务器端的状态从未改变，那么它将永远搜索。所以它需要在某个时候放弃

所以我想到了这个

搜索开始时添加30秒的简单设置超时。如果它在30秒后触发，那么它应该期望出现错误并显示错误消息。如果状态更改，则再次删除setTimeout

更新

使这个

var t=setTimeout（函数（）{myrequest.abort（）；}，30000）

不会解决问题，因为

问题是服务器总是一遍又一遍地给出相同的结果。那你就被卡住了

如何在代码中实现它

private make_request(context: StatusChecker) {


    // place timeout call here;
    var timeout_flag = false;
    window.setTimeout( function(){
        timeout_flag = true;
    }, 30000 );


    $.ajax({
      url: "/search/status",
      type: "GET",
      context: context,
      data: {
        search_id: gon.search["id"]
      },
      success: this.handle_response, // check for timeout
      error: this.handle_response_error // check for timeout
    });
  }

[编辑]

试试这个：

var max_requests = 5;
var requests = 0;

private handle_response(data): void {

  if (data == "ready") {
    requests = 0;
    this.request_itineraries();
  } else {
    if( requests < max_requests ){
      requests++;
      setTimeout(() => this.make_request(this), 500);
    }
  }
}

var max_请求=5；
var=0；
私有句柄\u响应（数据）：无效{
如果（数据==“准备就绪”）{
请求=0；
此。请求_行程（）；
}否则{
如果（请求<最大请求）{
请求++；
setTimeout（（）=>this.make_请求（this），500）；
}
}
}

[编辑]

试试这个：

var max_requests = 5;
var requests = 0;

private handle_response(data): void {

  if (data == "ready") {
    requests = 0;
    this.request_itineraries();
  } else {
    if( requests < max_requests ){
      requests++;
      setTimeout(() => this.make_request(this), 500);
    }
  }
}

var max_请求=5；
var=0；
私有句柄\u响应（数据）：无效{
如果（数据==“准备就绪”）{
请求=0；
此。请求_行程（）；
}否则{
如果（请求<最大请求）{
请求++；
setTimeout（（）=>this.make_请求（this），500）；
}
}
}
为ajax请求设置名称，并在需要时使用.abort（）：

 var shouldRepeat=true;
 var myrequest;

 private make_request(context: StatusChecker) {
      myrequest=  $.ajax({
      url: "/search/status",
      type: "GET",
      context: context,
      data: {
        search_id: gon.search["id"]
      },
      success: this.handle_response,
      error: this.handle_response_error
    });

    var t= setTimeout(function(){ 
         myrequest.abort();
         shoudlRepeat=false;},30000);

  }

  private handle_response(data): void {
    if (data == "ready") {
      this.request_itineraries();
    } else {
      if (shouldRepeat){
           setTimeout(() => this.make_request(this), 500);
      }
    }
  }

编辑：我还添加了一个全局布尔值shouldRepeat，它最初是
true
，但当达到30秒超时时，它会变成
false
，并阻止执行
make\u请求（this）
。
为ajax请求设置一个名称，并在需要时使用.abort（）：

 var shouldRepeat=true;
 var myrequest;

 private make_request(context: StatusChecker) {
      myrequest=  $.ajax({
      url: "/search/status",
      type: "GET",
      context: context,
      data: {
        search_id: gon.search["id"]
      },
      success: this.handle_response,
      error: this.handle_response_error
    });

    var t= setTimeout(function(){ 
         myrequest.abort();
         shoudlRepeat=false;},30000);

  }

  private handle_response(data): void {
    if (data == "ready") {
      this.request_itineraries();
    } else {
      if (shouldRepeat){
           setTimeout(() => this.make_request(this), 500);
      }
    }
  }

编辑：我还添加了一个全局布尔值shouldRepeat，它最初是
true
，但当达到30秒超时时，它变为
false
，并阻止执行
make\u请求（this）
。
我无法在make\u请求之前设置var myrequest。也许是在里面提出要求？我想这是可能的。我把它放在你的私有函数之外，以便在任何地方都可以使用，但是你可以把它放在里面，只在
make_request
中本地使用它。我认为它不起作用，因为。问题是当服务器总是反复给出相同的结果时。那你就是斯图克了。我已经更新了答案。请阅读编辑并检查我是如何更改代码的。在发出请求之前，我无法设置var myrequest。也许是在里面提出要求？我想这是可能的。我把它放在你的私有函数之外，以便在任何地方都可以使用，但是你可以把它放在里面，只在
make_request
中本地使用它。我认为它不起作用，因为。问题是当服务器总是反复给出相同的结果时。那你就是斯图克了。我已经更新了答案。请阅读编辑并检查我是如何更改代码的。你注意到你有一个循环吗
private make_request（context:StatusChecker）{…成功：this.handle_response，}private handle_response（data）：void{…否则{setTimeout（（）=>this.make_request（this），500）；}}}}
它们互相调用，如果状态不改变，这可以永远继续下去是的，我注意到了你有没有注意到你有一个环
private make_request（context:StatusChecker）{…成功：this.handle_response，}private handle_response（data）：void{…否则{setTimeout（（）=>this.make_request（this），500）；}}}}
他们互相调用，如果状态不改变，这会一直持续下去是的，我注意到了