ちょっと制作しているウェブページでJavaScriptを使って、ある一定時間の繰り返しで作動するプログラムを構築していたときのこと。
動作を確認しながらちょっと調べものをするため別タブを開いて検索して参考サイトを確認し、制作しているタブを開いたとき、一定時間で繰り返すメソッドが実行されずストップの状態でたまり、開いた瞬間に一斉にたまった分が実行された。
こんなことあるの？と驚いた。
JavaScriptで一定時間で繰り返す関数は、setInterval()を使用する。
第一引数には実行したい関数など、第二引数に間隔の時間を入れる。
今回、setInterval(“test()”, 1*1000)と設定したとし、1秒ごとに実行されるものを入れてたのだけども、調べものを3分ほどしていたとし、タブに戻ったら180件分のtest()が同時に実行された感じだった。
setIntervalってそんな挙動になるのか調べても見つけられなかった。誰か教えてほしいｗ
そこで自分の思いついた解決策として、タブから離れたときと戻った時のフラグもしくは関数など何か感知して判断できるものを用意するといいのかもと思った。
jQueryを調べてみると、focusとblurというものがそれにあたるのだそう。
$(window).on("blur", function(){ 離れたときに実行するプログラム })
$(window).on("focus", function(){ 戻っだときに実行するプログラム })
各々にconsole.log()でログ出力してみると確かに動作した。しかも、コンソールを確認するブラウザの開発者ツールなどの画面を選ぶとblurで設定した文字の出力があった。これは使えそう。
そして、離れた戻ったのフラグを何か用意して、インターバルの中で判断すればよいのかもと考え、以下のようなソースを作ってみた。
let focus = true;
let count = 0;
$(function(){
$(window).on("load", function(){
setInterval("test()", 1*1000);
});
$(window).on("focus", function(){
focus = true;
});
$(window).on("blur", function(){
focus = false;
});
})
function test() {
if(focus == true) {
console.log(count);
count++;
}
}
コンソール画面である程度数字が表示されていくところを確認し、いったん別のタブを選んで、また戻ってみると確かにその期間はカウントが止まっていた感じがみられた。
よかった。これで思ったような作業ができそう。
ただ、こんなプログラムより、バックグラウンドで一定動作してくれるプログラムや関数とかありそうな気もするけど、自分では探しきれず、ひとまずこれで対応してみようと思う。