Violation: 'setTimeout' handler took ms

Question

The array contains random values like let checkTypes = ['a','b','c'];. (The length of the array is also random.)

And, The array tries to call a functionthis.switch() by the number of arrays.

So, My code is ...

for (let i = 0; i <= checkTypes.length-1; i++) {
    window.setTimeout(() => {
       this.switch(checkTypes[i]);
       if (i != 0 && i != checkTypes.length -1) window.setTimeout(() => this.switch(checkTypes[i+1]))
    });
}

The following error remains([Violation] 'setTimeout' handler took <N>ms) in the developer's tool console and feels that my code does not seem to work normally.

Can I change the code so that I don't get this error?

https://stackoverflow.com/questions/41218507/violation-long-running-javascript-task-took-xx-ms - possible duplicate... — OPTIMUS PRIME, Nov 27 '19 at 06:21

score 6 · Answer 1 · answered Dec 11 '20 at 15:28

For starters: Chrome violation : [Violation] Handler took 83ms of runtime

What this is saying is this.switch is taking "too long" for it to feel like a responsive application. You don't have to fix this for it to work if it is working well enough for you. It is trying to provide a profiling of places you might improve your app / code.

Here is a bit easier to understand version of your code:

var start = 0, end = checkTypes.length-1;
for (let i = start, t,n; i <= end ; i++) {
    var t = checkTypes[i];
    var n = (i  > start  && i <= ) && checkTypes[i+1];
    window.setTimeout(() => { this.switch(x); });
    if(y) window.setTimeout(() => { this.switch(y); );
}

This will result in the execution tree as follows:

switch(arr[0]) i=0
switch(arr[1]) i=1
switch(arr[2]) i=2
switch(arr[2]) i=1
switch(arr[3]) i=3
switch(arr[3]) i=2
switch(arr[4]) i=4
switch(arr[4]) i=3

...
switch(arr[max-1]) i = max-1;
switch(arr[max]) i= max;
switch(arr[max]) i= max-1;

I think this could maybe be expressed with less confusion as :

var start = 0, end = checkTypes.length-1;
for (let i = start, t,n; i <= end ; i++) {
    var t = checkTypes[i];
    window.setTimeout(() => { this.switch(x); });
    if(i > 1) window.setTimeout(() => { this.switch(x); });
}

score 2 · Answer 2 · answered Nov 27 '19 at 06:27

2

The violation message is maybe due to the nested setTimeout. As you don't provide delay time here, the browser will execute the callbacks as soon as possible but with unpredictable behavior. Why not just write your code like that:

for (let i = 0; i < checkTypes.length; i++) {
   this.switch(checkTypes[i]);
   if (i > 0 && i < checkTypes.length) this.switch(checkTypes[i + 1]);
}

answered Nov 27 '19 at 06:27

Fabien

45
5

The setTimeouts will allow a responsive UI while still executing all the calls, so there is usually a reason for this. Nesting the timeouts shouldn't matter because each is an async call (meaning its not executed inside of the timeout code, it schedules a second timeout. – bobbysmith007 Dec 11 '20 at 15:25

Violation: 'setTimeout' handler took ms

2 Answers2