codingdir logo sitemap sitemap |
Home
PHP
C#
C++
ANDROID
JAVA
JAVASCRIPT
PYTHON

Javascript timing issue


By : , Category : javascript

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.

ReLated :

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 .
How to disable registered OpenCL platforms on Windows?
Is Observable broken in Angular 2 Beta 3?
Cross-thread operation not valid when using Invoke
How to pass an IEnumerable or queryable list of properties from Controller to View
Finding numbers after a certain keyword using Python
Pocketsphinx recognizes random phrases in a silence
Passing non-thread-safe objects through thread-safe containers
React scroll nav
BizTalk WCF-BasicHttp Adapter does not allow Empty string for Service Certificate Props
Why property ''cause" of Exception is repeating forever?
Privacy Policy 2017 © codingdir.com All Rights Reserved .