visibilitychange не ведет себя так, как планировалось

Question

На странице MDN для visibilitychange указано, что «он запускается, когда содержимое вкладки стало видимым или было скрыто». Однако, когда я запускаю следующий фрагмент, я сразу получаю бесконечную цепочку предупреждений, поэтому он, по-видимому, постоянно срабатывает. Почему это происходит?

function doEverything() { 
 
    if(document.visibilityState == 'visible') { 
 
     alert(document.visibilityState); 
 
     document.removeEventListener("visibilitychange", doEverything()); 
 
    } 
 
} 
 

 
document.addEventListener("visibilitychange", doEverything());

Answer 1

вы вызываете функцию вместо того, чтобы передать его в качестве аргумента.

document.addEventListener("visibilitychange", doEverything); 

и

document.removeEventListener("visibilitychange", doEverything); 

Answer 2

Почему это происходит?

Причина в том, что вы постоянно выполняет функцию doEverything в нескончаемый цикл.

1) doEverything() сначала выполняется здесь:

document.addEventListener("visibilitychange", doEverything()); 

2) doEverything() входит в цикл здесь, постоянно Отображение alert:

function doEverything() { 
    if(document.visibilityState == 'visible') { 
     alert(document.visibilityState); 
     document.removeEventListener("visibilitychange", doEverything()); 
    } 
} 

выше можно рассматривать как эквивалент :

function doEverything() { 
    if (true) { 
     doEverything(); // loop 
    } 
} 

Чтобы исправить это, вы не хотите выполнять функцию, а скорее предоставляете ссылку функции. Это простое изменение от doEverything() к doEverything в вашем addEventListener() и removeEventListener():

function doEverything() { 
    if(document.visibilityState == 'visible') { 
     console.log('hi'); 
     document.removeEventListener("visibilitychange", doEverything); 
    } 
} 

document.addEventListener("visibilitychange", doEverything); 

Это запустит предупреждение только один раз, когда язычок включен.