CODEWITHSUNDEEP
javascriptajaxxmlhttprequest
Adam
Adam

Reputation: 156

Set a duration for xhr.onload to be delayed

Currently I'm playing around with asynchronous page loading and I have reached the following implementation for when response is received:

xhr.onload = function( event ) {
    var res = event.target.responseXML;

    // Update page content
    setTimeout( function() {
        content.innerHTML = res.querySelector( '.content' ).innerHTML;
    }, 250 );
};

I've set a delay of 250 ms to make sure that the previous content block has a chance to finish its fade out animation before replacing and fading in the new content. The problem with this is that there will always be a delay when content is loaded unless I get the xhr response instantly (which of course won't happen in the real world).

What would be the best way to wait at least 250ms before allowing the page to render the new content — that is:

Upvotes: 0

Views: 774

Answers (2)

Adam
Adam

Reputation: 156

Update

I now have a solution that works however it doesn't seem very elegant.

function fetchPage() {
    var xhr = new XMLHttpRequest();
    var hasFinishedAnimating = false;
    var res;

    xhr.open( 'GET', window.location.href, true );
    xhr.responseType = 'document';
    xhr.send();

    // [1]
    setTimeout( function() {
        hasFinishedAnimating = true;
        if ( res ) updateContent( res );
    }, 250 );

    // [2]
    xhr.onload = function( event ) {
        res = event.target.responseXML.querySelector( '.content' ).innerHTML;
        if ( hasFinishedAnimating ) updateContent( res );
    };
}

// Update page content
function updateContent( html ) {
    content.innerHTML = html;
}

So what is happening here is that there is a race going on. One of the following cases will complete first:

  • [1] the countdown (fade out animation) will finish
  • [2] the new content is fetched

The case that runs first will always fail — [1] as content is still being fetched and [2] because the animation has not finished.

It is only when the losing case runs the content will finally be updated.

Upvotes: 1

Ravi Sharma
Ravi Sharma

Reputation: 187

There can be two ways to achieve this:

1. Set the response of the xhr in a global variable and assign it after the fade out is completed.

2.You can run a loop inside the onload function and check if the content is faded out, if yes then load the new content in.

The fade out can be checked via any DOM property changes.

Upvotes: 2

Related Questions