jQuery выполняет несколько функций только при фокусировке. 2 Проблемы

Question

Я нашел много кодов для выполнения нескольких функций каждую секунду только тогда, когда окно находится в фокусе, но они либо не работают, либо не работают правильно. Например, этот код:

<div id="test""></div> 
<br> 
<div id="test2"></div> 
<script language="javascript" type="text/javascript"> 
var interval_id; 
$(window).focus(function() { 
    if (!interval_id) 
     interval_id = setInterval(stuff1, 1000); 
     interval_id = setInterval(stuff2, 1000); 
}); 

$(window).blur(function() { 
    clearInterval(interval_id); 
    interval_id = 0; 
}); 



function stuff1(){ 
    $("#test").append("1" + " "); 
} 
function stuff2(){ 
    $("#test2").append("2" + " "); 
} 
</script> 

Так что я хочу stuff1stuff2 и будет выполняться каждый второй. Проблема 1: Это не начинается, когда я вызываю страницу в первый раз, мне нужно открыть другую страницу/скрыть эту страницу и вернуться к ней, чтобы функции запускались.

Проблема 2: Когда я возвращаюсь на эту страницу второй раз, stuff1 получает выполнение в два раза быстрее, поэтому каждые 0,5 секунды, в третий раз 0,33 секунды и так далее. Что здесь не так, и как я могу сделать это правильно?

Answer 1

1. Может быть, вам нужно вызвать функцию на .ready() (или .load()) слишком
2. clearInterval() вызывается только на stuff2. Для каждого из них используйте разные интервалы.

Создано сниппет для вас:

var interval_id; 
 
$(window).focus(function() { 
 
    if (!interval_id) { 
 
    interval_id1 = setInterval(stuff1, 1000); 
 
    interval_id2 = setInterval(stuff2, 1000); 
 
    } 
 
}); 
 

 
$(window).blur(function() { 
 
    clearInterval(interval_id1); 
 
    clearInterval(interval_id2) 
 
    interval_id1 = interval_id2 = 0; 
 
}); 
 

 
function stuff1() { 
 
    $("#test").append("1" + " "); 
 
} 
 

 
function stuff2() { 
 
    $("#test2").append("2" + " "); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test" style="margin-top: 40px;"></div> 
 
<br> 
 
<div id="test2" style="margin-top: 40px;"></div>