Javascript timing issue


Using the code the way you've written it, isn't going to work.

Instead, I recommend using css styling to accomplish what you want.

This is a general idea of how I would do it (give or take).

<script>
 // Code goes here
  var b = document.body;
  function text() {
    var testone=Math.floor(Math.random()*9);
    var d = document.createElement('div');
    d.innerHTML += '<span>' + testone + '</span>&nbsp';
    d.innerHTML += '<span style="display:none">' + testone + '</span>';

    setTimeout(function() {
      var childs = d.children;
      for(i = 0; i < childs.length; ++i) {
        childs[i].style.display = 'inline';        
      }      
    },500);

    b.appendChild(d);
  }

  setInterval(text,100);
</script>

NOTE for the above code to function properly, the script tag will have to execute inside the body tag (otherwise document.body will be null).

This plunkr shows the code in action.

http://plnkr.co/edit/JNJpaH2qEDwEl56C9YpU

I also took a few liberties, such as using a <div> instead of <br>, and I'm not worried about efficiency of reflowing dom every 1/2 second.

Version 1 (not so reliable, see @flup's comments)

some things to think through

you want your progress to take 10 minutes which is 600 seconds or 600.000 milliseconds.

1000 * 60 * 10 = 600.000

when your bar width is 400px (100%) you can at most do 400 steps (there isnt a smaller unit than 1px)

so if i divide 600.000ms / 400 steps, i get 1500ms, which means i should add every 1.5s one pixel. which sounds quite good.

600.000 / 400 = 1500

that would result in a code like this:

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 1); // add only 1px per step
    }
    $bar.text($bar.width() / 4 + "%");

}, 1500); // wait 1500ms per step

EDIT

Version 2

result of the discussion (thanks @flup) is the probably most reliable version (if you want to reach the 10 mins as accurate as possible):

var mins = 10; //change this to increase or decrease minutes
var tenMinsInMillis = 1000 * 60 * mins;
var finishedTS = (new Date()).getTime() + tenMinsInMillis;
var $bar = $('.bar');
var progressInterval = 1000;
var now, remaining, pWidth;

var setBar = function (pWidth) {
    $bar.width(pWidth + '%');
    $bar.text(Math.floor(pWidth) + "%");
};

var progress = setInterval(function () {
    now = (new Date()).getTime();
    remaining = finishedTS - now;
    pWidth = 100 - (remaining * 100 / tenMinsInMillis);

    setBar(pWidth);

    if (remaining < progressInterval) {
        clearInterval(progress);
        setTimeout(function () {
          setBar(100);
          $('.progress').removeClass('active');
        }, remaining);
    }

}, progressInterval);

http://jsfiddle.net/jLu8S/1/

(note, that i set the duration (var mins) to 1 minute, that you don't have to wait 10 mins in the fiddle...)

You should call your callback as the last action of your success function:

.
.
.
else if (storage.op == "register") {
   storage.firstname = objJSON.firstName;
   storage.lastname = objJSON.lastName;
   storage.setItem('loggedIn',JSON.stringify(true));
   nextPage = "options.html";
 }

 callback();  // execute your callback to the window closer here.

},
error: function( jqXHR,  textStatus,  errorThrown){
      //display error message
                }
      });
      }

After reading W3C document about resource timing API I found that they give an explanation for this in privacy & security section

Statistical fingerprinting is a privacy concern where a malicious web site may determine whether a user has visited a third-party web site by measuring the timing of cache hits and misses of resources in the third-party web site. Though the PerformanceResourceTiming interface gives timing information for resources in a document, the cross-origin restrictions prevent making this privacy concern any worse than it is today using the load event on resources to measure timing to determine cache hits and misses.

Basically they want to prevent malicious people from checking whether a user accessed some page previously.

Your script:

  • waits for 5 seconds
  • then animates the position of the element with a class of .front over a half second

Based on what your showing us, the CSS doesn't really do anything. Note that CSS transitions aren't the same as jQuery animations.

UPDATE:

An example based on my comments:

.front{
    left: 500px
    transition: left 2s;
}

.front.animate {
    left: 0px;
}

var delay = 5000;
setTimeout(function(){
    $('.front').addClass('animate');
,delay} 

Fiddle: http://jsfiddle.net/9q8sL/1/

Comments


Message :
Login to Add Your Comments .
Privacy Policy - Copyrights Notice - Feedback - Report Violation - RSS 2017 © bighow.org All Rights Reserved .