The functionality of this javascript setTimeout is quite peculiar when it comes to working with ajax requests

Question

The functionality of this javascript setTimeout is quite peculiar when it comes to working with ajax requests

I have created this script to monitor the progress of an import script. The script is designed to execute a function that makes an http request every X seconds.

function checkImportProgress() {
//if(import_status != 'finalizat') {
    alert("Checking Import Progress");
    setTimeout(function() { return updateImportProgress(); }, 2000);
    setTimeout(function() { return updateImportProgress(); }, 4000);
    setTimeout(function() { return updateImportProgress(); }, 6000);
    setTimeout(function() { return updateImportProgress(); }, 8000);

    //setTimeout(function() { checkImportProgress(); }, 400);
//}
//else {

//}
}

This script was used for testing purposes with comments included to indicate the intended functionality. Various combinations of setTimeout calls were tried, including using quotes, not using quotes, and using or not using anonymous functions.

var xmlhttp_import_progress;
function updateImportProgress() {
xmlhttp_import_progress=GetXMLHttpObject();
if (xmlhttp_import_progress==null) {
    alert ("Browser does not support HTTP Request (xmlhttp_import_progress)");
    return;
}

var url="crm/windows/import_progress.php";  
url=url+"?sid="+Math.random();

xmlhttp_import_progress.onreadystatechange=function() {
    if (xmlhttp_import_progress.readyState == 4) {
        progress_resp = xmlhttp_import_progress.responseText;
        progress = progress_resp.split('_');
        import_num_completed = progress[0];
        import_total = progress[1];
        import_status = progress[2];
        message = 'Import Progress: ' + import_num_completed + ' / ' + import_total;
        //document.getElementById("import_message_body").innerHTML = message;
        alert(progress_resp);        
    }
};
xmlhttp_import_progress.open("POST",url,true);
xmlhttp_import_progress.send(null);
}

This section contains the main logic of the checkImportProgress function.

When running the script, I receive the "Checking Import Progress" alert at the start of the import process. However, the alert displaying the progress details only shows up after the import process has completed (even though it continues to maintain the 2-second interval as intended by the setTimeout calls).

The PHP script in the AJAX request simply fetches session variables set by the import script and sends them back to JavaScript for display (such as number of imports completed out of total, number failed, etc).

Any suggestions on why this behavior occurs?

javascript ajax settimeout

Answer 1

Answer №1

xmlhttp_import_progres.readyState == 4)

is true only once the request is complete. This means that your alert dialogs will appear after the request has finished processing.

It's important to note that you cannot predict when the server will respond, so setting a specific time interval for alerts may not be reliable.

If you need a function to update periodically, consider using

setInterval(function(){...}, 2000)

.

EDIT

Additionally, make sure to add var when defining the XMLHTTP object like this:

var xmlhttp_import_progres = GetXMLHttpObject();

. By declaring it globally, only one instance of the object will be accessible.

Answer 2

xmlhttp_import_progres.readyState == 4)

is true only once the request is complete. This means that your alert dialogs will appear after the request has finished processing.

It's important to note that you cannot predict when the server will respond, so setting a specific time interval for alerts may not be reliable.

If you need a function to update periodically, consider using

setInterval(function(){...}, 2000)

.

EDIT

Additionally, make sure to add var when defining the XMLHTTP object like this:

var xmlhttp_import_progres = GetXMLHttpObject();

. By declaring it globally, only one instance of the object will be accessible.

Answer 3

Answer №2

Here, could you attempt to make a slight modification:
Please review the response above, however, the following code will provide clarity:

function progress_import() {
//if(import_status != 'finalizat') {
    alert("progress_import");
    setTimeout(function() { return update_progress_import(0); }, 2000);
    setTimeout(function() { return update_progress_import(1); }, 4000);
    setTimeout(function() { return update_progress_import(2); }, 6000);
    setTimeout(function() { return update_progress_import(3); }, 8000);

    //setTimeout(function() { progress_import(); }, 400);
//}
//else {

//}
}

AND

var xmlhttp_progress_import = [];
function update_progress_import(i) {
    xmlhttp_progress_import[i]= GetXMLHttpObject();
    if (xmlhttp_progress_import[i]==null) {
        alert ("Browser does not support HTTP Request (xmlhttp_progress_import)");
        return;
    }

    var url="crm/windows/import_progress.php";  
    url=url+"?sid="+Math.random();

    xmlhttp_progress_import[i].onreadystatechange=function() {
        if (xmlhttp_progress_import[i].readyState == 4) {
            progress_resp = xmlhttp_progress_import[i].responseText;
            progress = progress_resp.split('_');
            import_num_c = progress[0];
            import_num_t = progress[1];
            import_status = progress[2];
            message = 'Progress import: ' + import_num_c + ' / ' + import_num_t;
            //document.getElementById("body_import_message").innerHTML = message;
            alert(progress_resp);        
        }
    };
    xmlhttp_progress_import[i].open("POST",url,true);
    xmlhttp_progress_import[i].send(null);
}

Answer 4

Here, could you attempt to make a slight modification:
Please review the response above, however, the following code will provide clarity:

function progress_import() {
//if(import_status != 'finalizat') {
    alert("progress_import");
    setTimeout(function() { return update_progress_import(0); }, 2000);
    setTimeout(function() { return update_progress_import(1); }, 4000);
    setTimeout(function() { return update_progress_import(2); }, 6000);
    setTimeout(function() { return update_progress_import(3); }, 8000);

    //setTimeout(function() { progress_import(); }, 400);
//}
//else {

//}
}

AND

var xmlhttp_progress_import = [];
function update_progress_import(i) {
    xmlhttp_progress_import[i]= GetXMLHttpObject();
    if (xmlhttp_progress_import[i]==null) {
        alert ("Browser does not support HTTP Request (xmlhttp_progress_import)");
        return;
    }

    var url="crm/windows/import_progress.php";  
    url=url+"?sid="+Math.random();

    xmlhttp_progress_import[i].onreadystatechange=function() {
        if (xmlhttp_progress_import[i].readyState == 4) {
            progress_resp = xmlhttp_progress_import[i].responseText;
            progress = progress_resp.split('_');
            import_num_c = progress[0];
            import_num_t = progress[1];
            import_status = progress[2];
            message = 'Progress import: ' + import_num_c + ' / ' + import_num_t;
            //document.getElementById("body_import_message").innerHTML = message;
            alert(progress_resp);        
        }
    };
    xmlhttp_progress_import[i].open("POST",url,true);
    xmlhttp_progress_import[i].send(null);
}

The functionality of this javascript setTimeout is quite peculiar when it comes to working with ajax requests

Answer №1

EDIT

Answer №2

Similar questions

HTML5 Advanced API Integration with Vimeo

Is history.pushState capable of more than just making an xhr request?

In React-Redux, the reducer is programmed to only ever return the initial state

Struggling to generate fresh vue components

How to access selection range styles using JavaScript

ng-if directive in AngularJs will not function properly if the condition text includes a space

The issue arises when attempting to utilize ExpressJS middleware in conjunction with NextJS Link feature

The initial request is replaced by new information

While using .map() to display videos from an array, the button ends up playing all videos instead of only the selected

Layer added to map by Mapbox encountered an error during the process

Retrieve information using JavaScript and save it within a PostgreSQL Database table

Ways to add elements to a non-existent index in an array

Tips for populating an array with boolean values when a checkbox change event occurs:

Use JavaScript to swap out various HTML content in order to translate the page

Error Encountered: Server Issues with php and ajax

Implementing a dynamic loading strategy for Google reCAPTCHA based on language selection

Dropdown boxes that fetch data from a database in a cascading manner

Eliminate JSON data that pertains to dates that are either in the past or future

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

Modify URL parameters in Vue.js based on specific conditions to remove key-value pairs