相关疑难解决方法(0)

这与我在贴纸处于非活动状态时发布的有关计时问题的类似问题有关.我想知道是否有办法使非活动标签以与活动时相同的速度运行所有功能.理想的是页面顶部的一些脚本将其应用于文档中的所有内容.

对不起忘了在相关问题上放置一个链接,以显示我正在尝试做什么.

把它放在下面

在非活动选项卡中Javascript/Jquery计时出错

谢谢

加里

当事件使用setTimeout / setInterval排队时，并且用户正在查看单独的选项卡时，Chrome和Firefox在执行事件之前强制执行至少1000ms的延迟。本文详细介绍了该行为。

前面已经在StackOverflow上对此进行了讨论，但是问题和答案仅适用于动画。显然，当用户重新进入选项卡时，动画只能被强制更新为最新状态。

但是该解决方案不适用于顺序音频。我有Web Audio API依次播放多个音频文件，并且setTimeout用于倒数播放下一个音频文件的时间。如果将选项卡放在后台，则每个模式之间的间隔会令人烦恼1秒钟，这是为高级音频设计的API中的一个极端缺陷。

您可以在各种HTML5音序器中看到这种行为，例如使用PatternSketch-只需输入模式，播放并转到另一个选项卡即可。

因此，我需要一种变通方法：一种在没有1000ms限制的情况下将事件排队的方法。有人知道吗？

• 我能想到的唯一解决方案是让window.postMessage每毫秒运行一次，并每次检查事件是否要执行。这绝对不利于性能。这是唯一的选择吗？

• 显然，没有为Web Audio API计划事件系统，因此这是毫无疑问的。

我构建了一个 Web 应用程序，并使用带有 500ms 计时器的 setInterval 作为某些时钟。

当窗口处于活动状态时，时钟运行完美，我使用它：

var tempTimer = 0;
setInterval(function () {
    goTimer()
}, 500);

function goTimer() {
    tempTimer++;
    $("#timer").val(tempTimer);
}

但问题是当窗口/选项卡变为非活动状态时 - 间隔更改为 1000 毫秒！

当我再次聚焦窗口/选项卡时，它又变回 500 毫秒。

看看这个： http: //jsfiddle.net/4Jw37/

非常感谢。

当您最小化窗口或交换选项卡时，JavaScript 的setInterval()方法开始变得非常不可靠。

我刚刚完成了我正在开发的应用程序的时间跟踪功能，该功能由setInterval. 这一切都很完美，直到我开始最小化窗口并稍后再回到它，只是发现时间增加了窗口在屏幕上显示时所做的事情的一小部分。

这似乎是浏览器级别的“功能”。

是否有一种简单的替代方法可以将其替换为实际尊重时间单位的地方？

我正在使用 React 构建一个渐进式 Web 应用程序，其概念围绕着保持计时器运行。

就上下文而言，该应用程序可供家庭酿酒师跟踪酿造过程中何时需要添加啤酒花和其他添加物。在煮沸剩余一定时间时添加添加物，即在剩余 20 分钟时添加 1 盎司 Citra 啤酒花。

我使用 JavaScriptsetInterval来“勾选”计时器，这是elapsedSeconds驱动应用程序其余部分的状态属性。

我遇到的问题是计时器停止计时。如果我让应用程序运行，屏幕最终将锁定，或者我将切换应用程序等。服务工作人员将继续运行，并且计时器将继续滴答作响，时间很短（据我所知大约 10 分钟）测试中？）

我的想法是，我将在状态中存储一个纪元时间，它代表计时器启动的时间。这样，当用户“返回”PWA 时，我可以将当​​前纪元时间与存储的时间进行比较startingEpochTime以获取elapsedSeconds返回值。但如果不需要的话，我不想在每次“滴答”时都进行这种比较。理想情况下，只有当用户从其他上下文返回应用程序且 Service Worker 已经停止处理时，才会运行此比较。

我正在寻找的是执行此操作的正确方法。window.onload在这种情况下会起作用吗？如果我将应用程序切换到另一个应用程序 20 分钟，然后切换回我的计时器应用程序，该方法是否会再次运行？寻找这种情况的最佳实践，或者任何可能对我有帮助的想法。

我创建了一个空的 HTML 页面，其中有一个简单的方法setInterval()，通过 无限期地每 30 秒触发一次 AJAX 调用window.fetch()。然而，在 Chrome 中，如果我离开计算机 24 小时然后返回计算机，我会注意到 AJAX 调用在某个时刻停止触发。

请注意，这台计算机不会进入睡眠、休眠、屏幕锁定等状态。换句话说，我离开显示器，第二天回来，看到与前一天完全相同的屏幕，但Chrome 调试器中的“网络”选项卡显示浏览器在某个时刻停止进行 AJAX 调用。

我想知道的是，浏览器是否有某种内部进程或线程管理，可以将“空闲”选项卡置于睡眠状态并停止执行网络调用，或者停止执行 JavaScript 间隔和/或超时？现代浏览器是否有某种资源节约/内存管理功能，将选项卡置于“睡眠”状态，这可以解释这一点？

试图构建一个非常简单的 Javascript 倒计时。但是，只要选项卡处于非活动状态，倒计时就会开始滞后并保持不正确的计数。

参见这里的 jsfiddle 例如：https ://jsfiddle.net/gbx4ftcn/

function initTimer(t) {

  var self = this,
    timerEl = document.querySelector('.timer'),
    minutesGroupEl = timerEl.querySelector('.minutes-group'),
    secondsGroupEl = timerEl.querySelector('.seconds-group'),

    minutesGroup = {
      firstNum: minutesGroupEl.querySelector('.first'),
      secondNum: minutesGroupEl.querySelector('.second')
    },

    secondsGroup = {
      firstNum: secondsGroupEl.querySelector('.first'),
      secondNum: secondsGroupEl.querySelector('.second')
    };

  var time = {
    min: t.split(':')[0],
    sec: t.split(':')[1]
  };

  var timeNumbers;

  function updateTimer() {

    var timestr;
    var date = new Date();

    date.setHours(0);
    date.setMinutes(time.min);
    date.setSeconds(time.sec);

    var newDate = new Date(date.valueOf() - 1000);
    var temp = newDate.toTimeString().split(" ");
    var tempsplit = temp[0].split(':'); …

这是我的页面,它是一个测试移动元素的演示,但是在你改变你的页面之后,回到这里,为什么DIV移动得更快？

我的css:

   #box1 {
        width: 900px;
        height: 50px;
        background-color: #000;
        position: relative;
    }

    #box2 {
        width: 50px;
        height: 50px;
        background-color: #a00;
        position: absolute;
    }

我的HTML:

<div id="box1">
    <div id="box2"></div>
</div>

我的Js:

var box2 = document.getElementById("box2");
    var remove = setInterval(function () {
        box2.style.left = "0px";
        var move = setInterval(function () {
            var newLeft = Math.min(parseInt(box2.style.left) + 5, 850) + "px";
            box2.style.left = newLeft;
            if (newLeft == "850px") clearInterval(move)
        }, 20);
    }, 5000)

我写了一个简单的jquery滑块,基本上可以通过3个div,隐藏一个然后淡入下一个等等使用 setInterval()

滑块适用于我的目的,但当我打开其他选项卡然后返回页面的选项卡时,所有div都可见,然后它们开始消失并再次开始工作.

这是我的jquery,里面是$(function(){}):

    $('#slideshow-next').click(function() {
    pauseSlideshow();
    nextSlide();
});

$('#slideshow-prev').click(function() {
    pauseSlideshow();
    prevSlide();
});

$('#slideshow-pause').click(function(){
    pauseSlideshow();
});

$('#slideshow-play').click(function() {
    playSlideshow();
});

interval = setInterval('nextSlide()', 4000);
});

function playSlideshow() {
    interval = setInterval('nextSlide()', 4000);
    $('#slideshow-play').hide();
    $('#slideshow-pause').show();
    nextSlide();    
}

function pauseSlideshow() {
    interval = clearInterval(interval);
    $('#slideshow-pause').hide();
    $('#slideshow-play').show();
}

function nextSlide() {

    //hide current slide
    $('#slide'+currentSlide).hide();
    // show next slide
    var next = (currentSlide+1)%3;
    $('#slide'+next).fadeIn('slow');
    currentSlide = next;        
}

function prevSlide() {

    //hide current slide
    $('#slide'+currentSlide).hide();
    // show next slide
    var …

我使用Three.js加载了 navMesh 和 Animal 。动物在地图上移动。但是，当我更改选项卡动物移动暂停，如果再次打开该选项卡动物从暂停点再次移动。如何播放选项卡更改或选项卡背景的继续动画。

杰斯小提琴

function animate() {
            var currTime = window.performance.now();
            var delta = (currTime - lastFrameTime) / 1000;
            var dTime = Math.min(delta, maxFrameTime);
            elapsedTime += delta;
            lastFrameTime = currTime;

            tick(dTime);

            requestAnimationFrame( animate );
            render();
        }

我正在通过编写幻灯片插件来学习jQuery,如果结果很好,我将发布给任何人使用.我有一个良好的开端,但遇到了一个问题.如果你切换标签,然后回到它打开的页面,时间就搞定了.我已经看到这个问题涉及同样的事情,但我不知道如何将答案应用于我的特定情况.

1. 那么,我该如何修复SetInterval选项卡切换错误？通过切换标签看到这里:http://jsfiddle.net/8FkYj/
2. 有关代码改进的任何建议的高五.

您可以在此处查看和下载幻灯片:http://kthornbloom.com/slydeshow/或查看JSFiddle:http://jsfiddle.net/8FkYj/

(抱歉新手js代码!我至少试图评论一下)