发表新帖
发表新帖

How can I make setInterval also work when a tab is inactive in Chrome?

后端 未结
关注
13 1951
被撕碎了的回忆
被撕碎了的回忆 2020-11-21 09:59

I have a setInterval running a piece of code 30 times a second. This works great, however when I select another tab (so that the tab with my code becomes inacti

相关标签:
13条回答
  • 旧时难觅i
    2020-11-21 10:40

    I was able to call my callback function at minimum of 250ms using audio tag and handling its ontimeupdate event. Its called 3-4 times in a second. Its better than one second lagging setTimeout

    0 讨论(0)
  • 无人及你
    2020-11-21 10:43

    Heavily influenced by Ruslan Tushov's library, I've created my own small library. Just add the script in the <head> and it will patch setInterval and setTimeout with ones that use WebWorker.

    0 讨论(0)
  • 北荒
    2020-11-21 10:44

    There is a solution to use Web Workers (as mentioned before), because they run in separate process and are not slowed down

    I've written a tiny script that can be used without changes to your code - it simply overrides functions setTimeout, clearTimeout, setInterval, clearInterval.

    Just include it before all your code.

    more info here

    0 讨论(0)
  • 夕颜
    2020-11-21 10:48

    Just do this:

    var $div = $('div');
var a = 0;

setInterval(function() {
    a++;
    $div.stop(true,true).css("left", a);
}, 1000 / 30);

    Inactive browser tabs buffer some of the setInterval or setTimeout functions.

    stop(true,true) will stop all buffered events and execute immediatly only the last animation.

    The window.setTimeout() method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to).

    0 讨论(0)
  • 我寻月下人不归
    2020-11-21 10:51

    Note: this solution is not suitable if you like your interval works on the background, for example, playing audio or ... but if you are confused for example about your animation not working properly when coming back to your page(tab) this is a good solution.

    There are many ways to achieve this goal, maybe the "WebWorkers" is the most standard one but certainly, it's not the easiest and handy one, especially If you don't have enough Time, so you can try this way:

    ►BASIC CONCEPT:

    1- build a name for your interval(or animation) and set your interval(animation), so it would run when user first time open your page : var interval_id = setInterval(your_func, 3000);

    2- by $(window).focus(function() {}); and $(window).blur(function() {}); you can clearInterval(interval_id) everytime browser(tab) is deactived and ReRun your interval(animation) everytime browser(tab) would acive again by interval_id = setInterval();

    ►SAMPLE CODE:

    var interval_id = setInterval(your_func, 3000);

$(window).focus(function() {
    interval_id = setInterval(your_func, 3000);
});
$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});
    0 讨论(0)
  • 醉酒成梦
    2020-11-21 10:51

    It is quite old question but I encountered the same issue.
    If you run your web on chrome, you could read through this post Background Tabs in Chrome 57 .

    Basically the interval timer could run if it haven't run out of the timer budget.
    The consumption of budget is based on CPU time usage of the task inside timer.
    Based on my scenario, I draw video to canvas and transport to WebRTC.
    The webrtc video connection would keep updating even the tab is inactive.

    However you have to use setInterval instead of requestAnimationFrame.
    it is not recommended for UI rendering though.

    It would be better to listen visibilityChange event and change render mechenism accordingly.

    Besides, you could try @kaan-soral and it should works based on the documentation.

    0 讨论(0)
 看不清?
提交回复
热议问题