How to use time unit less than milliseconds in a setInterval or setTimeout

Question

How to use time unit less than milliseconds in a setInterval or setTimeout

Navigation

#1 by (7 votes)
#2 by (6 votes)

-2

I would like to know (if possible) how to use a unit of time less than milliseconds in the setInterval or setTimeout functions.

I made a progressive timer using the following code

function timer(){
    if(counter < qntLinhas){
        counter++;
        $("#quantidade").text(counter);
    }
    if(counter > qntLinhas){
        counter -= 1;
        $("#quantidade").text(counter);
    }
}

setInterval("timer()", 0);

The variable qntLinhas is referring to the result of an AJAX query that returns an X value.

It works very well, however, when the value of qntLines is too high, it takes a while to arrive at the end result, and it is boring to wait.

To circumvent this, I made two consecutive increments in the counter variable, but in addition to being gambiarra, the final result is not accurate.

I tried to use the countTo plugin and the time issue was resolved, but another problem came up. It does not allow me to update the value, which I want to achieve in counting, at runtime (via AJAX).

javascript jquery

asked by anonymous 05.12.2015 / 19:37

2 answers

6

The body of your question expresses a different doubt than the present of the title. This answer is about the title.

Unable , unless you rewrite the handler for scheduling events in an engine like Chromium at the same time forcing the browser to behave outside the Mozilla standards and HTML 5 specification (since all interfaces, both method and return values, work with non-fractioned milliseconds.)

Sources:

link

05.12.2015 / 20:32

How to pick up the last four months on a given date Processing payments for more than one API

score 7 · Accepted Answer

The question has already been answered here and has already received my +1. I will complement this answer, which refers to the actual problem, which was not initially posted in the body of the question.

For the accountant not to take too long, I made a formula that calculates the increment step according to the remaining distance to reach the total value:

var qntLinhas = 938203;
var counter = 0;

function timer(){
    if(counter < qntLinhas){
        counter += Math.min( Math.ceil( ( qntLinhas - counter ) / 10 ), counter + 1);
        $("#quantidade").text(counter);
        setTimeout("timer()", 50);
    }
}
timer();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><divid="quantidade"></div>

For processing not to occur randomly, we change the setInterval to setTimeout , which will only be called while the counter needs to increment.

When completing Ajax, just call timer() to update the counter.

To adjust the time, simply move the / 10 of the formula, not the setTimeOut . The division of the formula adjusts the counter's speed without the need to overload page processing with less timeout.

Test with very different values

This one I posted only as a test, to show how the formula adapts to very different values, with little difference between the finalizations:

var qntLinhas1 = 1003;
var qntLinhas2 = 389041;
var qntLinhas3 = 93820317;
var counter1 = 0;
var counter2 = 0;
var counter3 = 0;

function timer(){
   if(counter1 < qntLinhas1) counter1 += Math.min( Math.ceil( ( qntLinhas1 - counter1 ) / 10 ), counter1 + 1);
   if(counter2 < qntLinhas2) counter2 += Math.min( Math.ceil( ( qntLinhas2 - counter2 ) / 10 ), counter2 + 1);
   if(counter3 < qntLinhas3) counter3 += Math.min( Math.ceil( ( qntLinhas3 - counter3 ) / 10 ), counter3 + 1);
   $("#quantidade1").text(counter1);
   $("#quantidade2").text(counter2);
   $("#quantidade3").text(counter3);
   if(counter1 < qntLinhas1 || counter2 < qntLinhas2 || counter3 < qntLinhas3) setTimeout("timer()", 50);
}
timer();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><divid="quantidade1"></div>
<div id="quantidade2"></div>
<div id="quantidade3"></div>