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

但我遇到了这个问题

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

所以我想到了这个

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

更新

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

不会解决问题，因为

问题是服务器总是反复提供相同的结果。那你就被困了

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

Answer 1

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

Answer 2

为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_request(this)。

用于搜索的setTimeout

2 个答案: