setTimeout for search

Question

I have this function, that make request to server to have data.

Here is a code of it

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

But I faced this problem

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.

So I thought about this

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.

UPDATE

Making this var t= setTimeout(function(){ myrequest.abort();}, 30000);

Will not fixing issue, because

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

How can I implement it in my code?

Answer 1

Set a name for ajax request and use .abort() when needed:

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

Edit: I also added a global boolean shouldRepeat which is initially true but when the 30 seconds timeout reached, it becomes false and prevents the execution of make_request(this) anymore.

Answer 2

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

[EDIT]

try this:

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