javascript - 设置搜索超时

Question

我有这个功能，可以向服务器请求数据。

这是它的代码

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

但是我遇到了这个问题

Problem is if for some reason the state on the server side never change, then it will search forever. so it needs to give up at some point.

所以我想到了这个

It could be a simple setTimeout of 30 seconds added when search started. If it trigger after 30 seconds then it should expect something went wrong and show error message. If state changes then remove setTimeout again.

更新

制作这个 var t= setTimeout(function(){ myrequest.abort();}, 30000);

不会解决问题，因为

The problem is when the server always gives the same result over and over. Then you are stuck

如何在我的代码中实现它？

Answer 1

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

编辑:我还添加了一个全局 bool 值shouldRepeat，最初为true，但当达到30秒超时时，它变为 false 并阻止再执行 make_request(this)。