181

背景: 私は、人々が注意を払っているかどうかを検出する必要があるいくつかのユーザー インターフェイス テストを行っています。ただし、この質問はページ表示 APIに関するものではありません。

具体的には、別のブラウザーで現在のタブがアクティブでない場合、またはブラウザー ウィンドウがアクティブでない場合に、Javascript コードがどのように影響を受けるかを知りたいです。これまでに次のことを掘り下げました。

次の質問があります。

  • モバイル ブラウザ以外で、タブがアクティブでないときにデスクトップ ブラウザが JS の実行を一時停止することはありますか? いつ、どのブラウザを？
  • setIntervalリピートを減らすのはどのブラウザーですか? 制限またはパーセンテージまで削減されているだけですか? たとえば、10 ミリ秒の繰り返しと 5000 ミリ秒の繰り返しがある場合、それぞれにどのような影響がありますか?
  • これらの変更は、タブだけではなく、ウィンドウがフォーカスされていない場合に発生しますか? (OS API が必要なため、検出が難しいと思います。)
  • アクティブなタブで観察されない他の影響はありますか? そうでなければ正しく実行されるもの (つまり、前述の Jasmine テスト) を台無しにすることはできますか?
4

3 に答える 3

12

私が観察したこと: Chromeの非アクティブなタブでは、 1000ms未満の待機時間setTimeoutはすべて1000msに丸められます。より長いタイムアウトは変更されないと思います。setInterval

Chrome 11およびFirefox 5.0以降の動作のようです: https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout#Inactive_tabs

さらに、ウィンドウ全体が非アクティブな場合、このように動作するとは思いません (ただし、調査するのは非常に簡単なようです)。

于 2013-04-10T08:36:46.980 に答える
1

これらを補完する新しい回答: chrome 78.0.3904.108 では、別のタブに移動して戻ってくると、これらすべてのタイムアウト (1000 ミリ秒未満のものだけでなく) が予想よりも少し長くかかることに気付きました。私が見ている動作は、「非アクティブなタブのすべてのタイムアウトは、最大 1000 ミリ秒まで、さらにいくらか遅れる可能性があります」とより正確に説明されています。以下を実行して、別のタブに切り替えてみてください!

let timeouts = [ 500, 1000, 2000, 3000, 10000 ];

let minExcess = document.getElementsByClassName('minExcess')[0];

timeouts.forEach(ms => {
  let elem = document.getElementsByClassName(`t${ms}`)[0];
  let cnt = 0;
  
  let lastMs = +new Date();
  let f = () => {
    let curMs = +new Date();
    let disp = document.createElement('p');
    let net = curMs - lastMs;
    lastMs = curMs;
        
    setTimeout(f, ms);
    if (minExcess.value && (net - ms) < parseInt(minExcess.value)) return;
    
    disp.innerText = `${net},`;
    elem.appendChild(disp);
    if (++cnt > 10) elem.firstElementChild.remove();
    
  };
  setTimeout(f, ms);
  
});
body { font-size: 80%; }
div {
  max-height: 80px;
  overflow-x: auto;
  background-color: rgba(0, 0, 0, 0.1);
  margin-bottom: 2px;
  white-space: nowrap;
}
p { margin: 0; }
div > p {
  margin: 0;
  display: inline-block;
  vertical-align: top;
  margin-right: 2px;
}
input { margin: 0 0 10px 0; }
.t500:before { display: block; content: '500ms'; font-weight: bold; }
.t1000:before { display: block; content: '1000ms'; font-weight: bold; }
.t2000:before { display: block; content: '2000ms'; font-weight: bold; }
.t3000:before { display: block; content: '3000ms'; font-weight: bold; }
.t10000:before { display: block; content: '10000ms'; font-weight: bold; }
<p>Ignore any values delayed by less than this amount:</p>
<input type="text" class="minExcess" value="200" pattern="^[0-9]*$"/>
<div class="timeout t500"></div>
<div class="timeout t1000"></div>
<div class="timeout t2000"></div>
<div class="timeout t3000"></div>
<div class="timeout t10000"></div>

于 2019-12-11T23:51:59.763 に答える