setInterval和Fades上的遞歸太多

Question

我有一個我從背景改編的屏幕保護程序。然而，唯一的問題是，屏幕保護程序只能在通過錯誤之前一次或兩次工作：Too much recursion我讀到這是從觸發器的'冒泡'，但我不知道如何防止它。我現在重寫了幾次代碼。

等待十秒讓屏幕保護程序啓動移動鼠標停止它，錯誤通常從那裏開始。

錯誤

too much recursion jquery.min.js:2 

http://codepen.io/WAS/pen/fuHLn

var i = 0, 
    screensaver = $('#screensaver'), 
    startTime = 100, 
    isOff = true; 

function countit() { 
    if (i >= startTime && isOff == true) { 
    screensaver.fadeIn('slow', function() { 
     isOff = false; 
    }); 
    } 
    screensaver.bind('mousemove', function(e){ 
    i=0; 
    screensaver.fadeOut('fast'); 
    }); 
    i++; 
} 

$(window).ready(function(){ 

    var screensaver = setInterval(countit, 100); 

}); 

Answer 1

的一個主要問題是，你結合的間隔內的事件處理程序。在100ms期間，新的事件處理程序將被添加到元素中。

另一個問題是，你沒有重置布爾值。

你可以嘗試以下方法：

var screensaver = $('#screensaver'), 
 
    startTime = 5000, 
 
    timeout = null, 
 
    isOff = true; 
 
    function timer() { 
 
     if (!timeout && isOff) { // if no timer exists and screensaver is off, start one 
 
     timeout = setTimeout(function() { 
 
      screensaver.fadeIn('slow', function() { 
 
       isOff = false; // screensaver active 
 
      }); 
 
     }, startTime); 
 
     } 
 
    } 
 
    
 
    $(document).ready(function() { 
 
     var interval = setInterval(timer, 1000); // keep checking for timer every 1s 
 
     screensaver.bind('mousemove', function (e) { 
 
     if (timeout) { // if a timer is running, clear it 
 
      clearTimeout(timeout); 
 
      timeout = null; 
 
     } 
 
     if (!isOff) { //if the screensaver is active, hide it 
 
      screensaver.fadeOut('fast', function() { 
 
       isOff = true; // screensaver inactive 
 
      }); 
 
     } 
 
     }); 
 
    });

body { 
 
    padding:0; 
 
    margin:0; 
 
    overflow:hidden; 
 
    height: 600px; 
 
    background-color: #1A1A1A; 
 
} 
 
p { 
 
    color:white; 
 
} 
 
#screensaver { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right:0; 
 
    bottom:0; 
 
    left: 0; 
 
    width:100%; 
 
    height:100%; 
 
    background-color: dodgerblue; 
 
} 
 
#screensaver div{ 
 
    position: absolute; 
 
    top: 0; 
 
    right:0; 
 
    bottom:0; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 100px; 
 
    line-height:100px; 
 
    margin:auto; 
 
    text-align:center; 
 
    color:#fff; 
 
    background-color: hotpink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="screensaver"><div>Screensaver</div></div> 
 
<br /> 
 
<p align="center">Forums and stuff here.... 
 
    </p>

（等待5秒鐘即可激活屏幕保護程序和移動鼠標結果窗口內將其關閉）