Search code examples
javascriptxmlhttprequestsettimeout

JS setTimeout() alternative


Like i explain here , i can't use window.setTimeout() anymore and any window classical functions like clearInterval etc ...); but i need calling a JS block code as an async one.

That's why i used XHR request.

What is the best way to implement a smart alternative to window.setTimeout() with XHR ?

// Not working :(
setTimeout(function(){ 
  document.getElementById("messageTimer").innerHTML = "Happy New Year ! (old version)";
}, 10);

// with or without jQuery - but XHR
jQuery.ajax({
    url: "/local/url/easy",
    success: function(html, textStatus, jqXHR) {
            // a loop ?
            // timeout done ?
            document.getElementById("messageTimer").innerHTML = "Happy New Year ! (working version)"
 }});

My fiddle test : https://jsfiddle.net/mlefree/xzh3w2we/

Tks


Solution

  • Try using jQuery version 3.0 .animate(), which now uses requestAnimationFrame

      // Creates a jQ object where elem set to index of [0]
      // a plain object with value of 0 `{to:0}`
      // call .animate() chained to the jQ object
      // Animates `{to:0}` value from 0 - 1
      // $({to:0}).animate({to:1}
    
    var duration = 5000;
    $({to:0}).animate({to:1}, duration, function() {
      // do stuff after `duration` elapsed
      $("#messageTimer").html("Happy New Year ! (working version)")
    })
    <script src="https://code.jquery.com/jquery-3.0.0-beta1.min.js"></script>
    <div id="messageTimer"></div>