Managing numerous Ajax requests: Utilize clearTimeout

Question

Managing numerous Ajax requests: Utilize clearTimeout

I am working with data retrieved from a MySQL request. Each element has a unique id, which is also passed as a parameter to the onclick function.

Every time an element is clicked, it triggers a search in the database for specific data. This process continues until the desired result is obtained. Once the expected answer is received, the function should stop.

My challenge is figuring out how to determine when the expected data has arrived so that I can halt the function. Changing the value of var x leads to an "x is not defined" error.

javascript ajax

Answer 1

Answer №1

Set up a collection of intervals

var timeIntervals = {};
function find(id) {
    document.getElementById(id).style.color = "red";
    timeIntervals[id] = setInterval(function () {output(id)}, 1000);
}

function output(id) {
    document.getElementById("result").innerHTML = id;
    /*
    AJAX call to check for an answer

     if(isAnswered)
     {
         clearTimeout(timeIntervals[id]);
     }

    */
}

A preferable approach would be using setTimeout instead of managing the intervals

function find(id) {
    document.getElementById(id).style.color = "red";
    output(id);
}

function output(id) {
    document.getElementById("result").innerHTML = id;
    /*
    AJAX call to check for an answer

     if(!isAnswered)
     {
         window.setTimeout( function () { output(id); }, 1000);
     }

    */
}

Answer 2

Set up a collection of intervals

var timeIntervals = {};
function find(id) {
    document.getElementById(id).style.color = "red";
    timeIntervals[id] = setInterval(function () {output(id)}, 1000);
}

function output(id) {
    document.getElementById("result").innerHTML = id;
    /*
    AJAX call to check for an answer

     if(isAnswered)
     {
         clearTimeout(timeIntervals[id]);
     }

    */
}

A preferable approach would be using setTimeout instead of managing the intervals

function find(id) {
    document.getElementById(id).style.color = "red";
    output(id);
}

function output(id) {
    document.getElementById("result").innerHTML = id;
    /*
    AJAX call to check for an answer

     if(!isAnswered)
     {
         window.setTimeout( function () { output(id); }, 1000);
     }

    */
}

Answer 3

Answer №2

You have the issue of declaring X inside the function, making it inaccessible outside of it.

Consider using the following approach instead:

var x; // declare a global variable here
function search(id) {
     document.getElementById(id).style.color = "red";
     return setInterval(function () {answer(id)}, 1000); // return the interval ID
}

function answer(id) {
    document.getElementById("result").innerHTML = id;
    clearTimeout(x);
    /*
    Perform an AJAX request to find an answer.
    
     if(answer)
     {
     clearTimeout(x); // Note that var x is not defined globally
     }
      
    */
}

<div id="one" onclick="x = search('one');"> <!-- Assign X with the interval -->
    click
</div>

<div id="two" onclick="x = search('two');">
    click
</div>

<div id="result">
    
</div>

Answer 4

You have the issue of declaring X inside the function, making it inaccessible outside of it.

Consider using the following approach instead:

var x; // declare a global variable here
function search(id) {
     document.getElementById(id).style.color = "red";
     return setInterval(function () {answer(id)}, 1000); // return the interval ID
}

function answer(id) {
    document.getElementById("result").innerHTML = id;
    clearTimeout(x);
    /*
    Perform an AJAX request to find an answer.
    
     if(answer)
     {
     clearTimeout(x); // Note that var x is not defined globally
     }
      
    */
}

<div id="one" onclick="x = search('one');"> <!-- Assign X with the interval -->
    click
</div>

<div id="two" onclick="x = search('two');">
    click
</div>

<div id="result">
    
</div>

Managing numerous Ajax requests: Utilize clearTimeout

Answer №1

Answer №2

Similar questions

What is the process for incorporating a compiled JavaScript library into a TypeScript project?

The Google Maps JavaScript API is failing to load

Is there a way to incorporate hyperlinks into the Application column of my v-data-table component?

Guide on How to Add a Save as Button for an Image

Identifying geometric coordinates within Canvas

Is there a way to deliberately trigger an error using Selenium WebDriverIO?

The error message reads: "Attempting to call a class constructor Model without using the 'new' keyword in Sequelize 5 and Babel 7 results in a TypeError."

Getting information from a database using PHP and AngularJS through the $http.get method

Guide on accessing the fastify application instance within an imported module

Checking for multiple click events in jQuery

Adding an image or icon inside a tooltip using ChakraUI or CSS in a React project

The troubleshooting of debugging javascript remotely on IntelliJ with the JetBrains Chrome extension is proving to be unsuccessful

The significance of Token Details in Tokbox

Execution of Ajax call fails to occur synchronously

Should the request be sent to the parent or child component?

A specific div remains in place as the user scrolls

Sending information into MySQL using NodeJS with the help of Postman

Tips for deleting multiple objects from an array in angular version 13

Construct a drop-down menu using properties extracted from a JSON file in AngularJS

Is it possible to compare every element in an array with one another using an asynchronous process in NodeJS?