在屏幕活动后停止动画

Question

我有代码设置为在屏幕不活动2秒后启动动画（我基本上在做一个屏幕保护程序）。但我无法弄清楚如何停止动画和DIV回到正常后，屏幕不再空闲（鼠标移动，屏幕上轻点，等）

这里的的jsfiddle - http://jsfiddle.net/Xw29r/7129/

我的代码：

var timeoutID; 

function setup() { 
this.addEventListener("mousemove", resetTimer, false); 
this.addEventListener("mousedown", resetTimer, false); 
this.addEventListener("keypress", resetTimer, false); 
this.addEventListener("DOMMouseScroll", resetTimer, false); 
this.addEventListener("mousewheel", resetTimer, false); 
this.addEventListener("touchmove", resetTimer, false); 
this.addEventListener("MSPointerMove", resetTimer, false); 

startTimer(); 
} 
setup(); 

function startTimer() { 
// wait 2 seconds before calling goInactive 
timeoutID = window.setTimeout(goInactive, 2000); 
} 

function resetTimer(e) { 
window.clearTimeout(timeoutID); 

goActive(); 
} 

function goInactive() { 
$(document).ready(function(){ 
animateDiv(); 

}); 

function makeNewPosition(){ 

// Get viewport dimensions (remove the dimension of the div) 
var h = $('#wrap').height() - 50; 
var w = $('#wrap').width() - 50; 

var nh = Math.floor(Math.random() * h); 
var nw = Math.floor(Math.random() * w); 

return [nh,nw];  

} 

function animateDiv(){ 
var newq = makeNewPosition(); 
var oldq = $('.a').offset(); 
var speed = calcSpeed([oldq.top, oldq.left], newq); 

$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){ 
    animateDiv();   
}); 

}; 

function calcSpeed(prev, next) { 

var x = Math.abs(prev[1] - next[1]); 
var y = Math.abs(prev[0] - next[0]); 

var greatest = x > y ? x : y; 

var speedModifier = 0.1; 

var speed = Math.ceil(greatest/speedModifier); 

return speed; 

} 
} 
function goActive() { 
startTimer(); 
} 

Answer 1

你走了。添加额外的变量做到了这一点。

编辑

方框返回开始处于活动状态。

var timeoutID; 
 
var isActive = true; 
 
function setup() { 
 
    this.addEventListener("mousemove", resetTimer, false); 
 
    this.addEventListener("mousedown", resetTimer, false); 
 
    this.addEventListener("keypress", resetTimer, false); 
 
    this.addEventListener("DOMMouseScroll", resetTimer, false); 
 
    this.addEventListener("mousewheel", resetTimer, false); 
 
    this.addEventListener("touchmove", resetTimer, false); 
 
    this.addEventListener("MSPointerMove", resetTimer, false); 
 

 
    startTimer(); 
 
} 
 
setup(); 
 

 
function startTimer() { 
 
    // wait 2 seconds before calling goInactive 
 
    timeoutID = window.setTimeout(goInactive, 2000); 
 
} 
 

 
function resetTimer(e) { 
 
    window.clearTimeout(timeoutID); 
 

 
    goActive(); 
 
} 
 

 
function goInactive() { 
 
    $(document).ready(function() { 
 
    animateDiv(); 
 
    isActive = false; 
 
    }); 
 

 
    function makeNewPosition() { 
 

 
    // Get viewport dimensions (remove the dimension of the div) 
 
    var h = $('#wrap').height() - 50; 
 
    var w = $('#wrap').width() - 50; 
 

 
    var nh = Math.floor(Math.random() * h); 
 
    var nw = Math.floor(Math.random() * w); 
 

 
    return [nh, nw]; 
 

 
    } 
 

 
    function animateDiv() { 
 
    var newq = makeNewPosition(); 
 
    var oldq = $('.a').offset(); 
 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 
 

 
    $('.a').animate({ 
 
     top: newq[0], 
 
     left: newq[1] 
 
    }, speed, function() { 
 
    \t if(!isActive) 
 
     \t animateDiv(); 
 
    }); 
 

 
    }; 
 

 
    function calcSpeed(prev, next) { 
 

 
    var x = Math.abs(prev[1] - next[1]); 
 
    var y = Math.abs(prev[0] - next[0]); 
 

 
    var greatest = x > y ? x : y; 
 

 
    var speedModifier = 0.1; 
 

 
    var speed = Math.ceil(greatest/speedModifier); 
 

 
    return speed; 
 

 
    } 
 
} 
 

 
function goActive() { 
 
    startTimer(); 
 
    isActive = true; 
 
    $('.a').stop(); 
 
    $('.a').css('top', 8); 
 
    $('.a').css('left', 8); 
 
}

#wrap { 
 
    width: 400px; 
 
    height: 300px; 
 
    background-color: #9ff; 
 
} 
 

 
div.a { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <div class='a'></div> 
 
</div>