I have a function that makes a request to the server to retrieve data.
Here is the code for 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);
}
}
However, I encountered the following issue:
The problem arises when the state on the server side remains unchanged, causing an endless search. There needs to be a mechanism in place to give up at some point.
One solution I considered was:
Adding a simple setTimeout of 30 seconds when the search begins. If it triggers after 30 seconds without any change, it should display an error message. If the state changes, then the setTimeout should be removed.
UPDATE
Implementing
var t= setTimeout(function(){ myrequest.abort();}, 30000);
will not resolve the issue because:
The underlying problem occurs when the server consistently returns the same result. In such cases, the system gets stuck in a loop.
How can I address this within my code?