Bug/Problem with setTimeout function

[ibrahimAboelsuod]

Ionic version:
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a
[x] bug report
[ ] feature request
[ ] support request

Current behavior:
setTimeout() always wait for about an extra second despite what ever time I set.

Expected behavior:
The function to only wait the duration I set or at least close enough to it.

Steps to reproduce:
1- Create a blank app.
2- Use setTimeout() with any time less than 1 second -to notice the problem easier.

Related code:

console.log('Timer Start');
let timeOutHandler = setTimeout(
    ()=>{
        console.log('Timer End');
    },
    100
);

Other information:

• I am using setTimeout() to keep track of some user events -like scroll ending-, which worked as expected (executed a function after a set time of milliseconds).

• A few days ago I updated my device WebView to the latest version. Immediately after the function stopped working correctly. (tested on 60.0.3112.107 & 60.0.3112.116)

• Didn't get the same issue with a blank Cordova app.

• I tested the function in different parts/pages of the app.

• I tested on 3 android devices with the same results.

• The problem only appears in the latest WebView update (maybe slightly earlier updates too).

• The tests where done in blank apps.

• Of course the code above was written by JavaScript for the cordova app.

My post on the forums with more info + screenshots

Ionic info: (For the blank app):

cli packages:

    @ionic/cli-utils  : 1.6.0 (C:\Users\iaboelsuod\AppData\Roaming\npm\node_modules\ionic\node_modules\@ionic\cli-utils)
    ionic (Ionic CLI) : 3.6.0 (C:\Users\iaboelsuod\AppData\Roaming\npm\node_modules\ionic)

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.0
    OS                : Windows 10
    npm               : 3.10.10

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic!

[ibrahimAboelsuod]

The sample application :
https://github.com/ibrahimAboelsuod/Ionic-Blank-Timeout-Bug

[kensodemann]

Thank you for providing a sample application. I built it and ran it both on via browser and via an Android device and in both cases the delay before the timeout was reasonably close to whatever the timeout was set to (I modified your code slightly to give an actual time):

    console.log('Timer Start');
    const start = Date.now();
    let timeOutHandler = setTimeout(
      () => {
        const e = Date.now() - start;
        console.log('Timer End', e);
      },
      100
    );

Changing the timeout number changed the number of ms logged to console accordingly (right around 130 or 140 for 100, 520-540 for 500, etc.).

Since this is not an issue with the Ionic Framework I am going to close this issue. As this seems like more of a support question I will urge that you ask this question on our forum or on our slack channel.

Thanks for using Ionic!

[ibrahimAboelsuod]

I built it and ran it both on via browser and via an Android device

Can you check the WebView version? The bug is found on: 60.0.3112.107 & 60.0.3112.116

[kensodemann]

On android: 58.0.3029.125
Locally: 60.0.3112.113

[ibrahimAboelsuod]

@kensodemann Can you please get the device to 60.0.3112.116 -latest- and try again?
It's expected to work correctly on 58.0.3029.125 but it shouldn't on a device with 60.0.3112.113 as far as I know.

[ibrahimAboelsuod]

The reason this issue might be hard to replicate -as far as my understating goes- Is probably the same reason that caused it.
Since JavaScript is single threaded the way timeout works is a bit different than other languages. Long story short, it's callback might get delayed if other process gets a higher priority than the timeout. That also related to how the WebView choose to handle processes which one would guess it was changed in the above versions.
I could be totally wrong here.

[kensodemann]

Installed latest WebView. Still not an issue on my device. Regardless, this is not an Ionic Framework issue.

[ibrahimAboelsuod]

Regardless, this is not an Ionic Framework issue.

If the problem exists in an ionic app an not in a cordova app, then what could be causing it?

[ibrahimAboelsuod]

@kensodemann What android version did you test on?

[kensodemann]

If the problem exists in an ionic app an not in a cordova app, then what could be causing it?

The reason this is not an Ionic Framework issue is that the Ionic Framework does nothing to muck around with the timeout or the JavaScript engine execution slots or any such thing as that.

The time specified in a timeout is just the minimum time to wait. It will almost certainly be slightly longer as the JavaScript engine waits for an execution slot. So that is what I believe is occurring in your case. My guess is that if you extended this to a 5000 ms delay, for example, you would actually get something closer to 5000 ms.

As an example, I see it takes over 5 seconds for you to get the "device ready" where-as on my device I am getting that in under a second. This tells me that there is a fair amount of start-up lag on your device. My best guess on what is happening is that the JS engine is simlpy not getting a chance to execute the timeout until that second has elapsed. My guess is there is a lot of contention for resources on your device when the app is loading. My guess is also that the update to the latest versions of WebView apparently made this issue worse or shuffled some execution priorities or something like that delaying the execution of your timeout code. All of that is out of the framework's hands, however (other than startup and load time, which is a big focus for v4 of Ionic, but startup and load time also includes Angular, plugins, etc, so that isn't all Ionic either).

What android version did you test on?

8.0.0 on a newer device

[ibrahimAboelsuod]

@kensodemann I would totally agree with you, but if you look at the notes section above:

I tested the function in different parts/pages of the app.
The tests where done in blank apps.

• So it wasn't only tested directly after the load.
• I add nothing in the blank apps except the timeout functions, so if "the JS engine is simply not getting a chance to execute the timeout" then it would be because it's executing other ionic-related processes.
• If this is the case then there are huge chance the issue wont show on higher devices, or ones which can handle this "load" better.
• I wouldn't call my device low, but the issue was found on 2 other devices, on android 6 and 5.

I know that with longer durations there wont be really a noticeable delay -I have it working normally with about 1500ms. But in a lot of scenarios low duration is needed -like keeping track of when the scroll ends in my case.