setTimeout在clearTimeout被調用後繼續運行

Question

我在鼠標關閉期間將對象移動到1個方向，鼠標指針上升時應停止動畫。

我正在使用setTimeout，但在發佈clic之後它會一直運行一段時間。

var stopmov 
function tomove(){ 
    $('.plwid').animate({ 
     left: '+=1' 
    },1); 
    stopmov=setTimeout(function(){ tomove(); }, 1); 
} 

$('.plwid').mouseup(function(){ 
    clearTimeout(stopmov); 
}).mousedown(function(){ 
    tomove(); 
}); 

http://jsfiddle.net/oa9bsqy1/

Answer 1

我已經setTimeout和setInterval玩耍了，但我認爲這是更好的jQuery的動畫的完成回調使用遞歸調用。

停止然後很容易與$('.plwid').stop();。

請在下面找到演示JSFiddle。

function tomove() { 
 
    $('.plwid').animate({ 
 
     left: '+=10' 
 
    }, 
 
    100, 'linear', tomove); 
 
} 
 

 
$(document).mouseup(function() { 
 
    $('.plwid').stop(); 
 
}); 
 

 
$('.plwid').mousedown(function() { 
 
    tomove(); 
 
});

.plwid { 
 
    position:relative; 
 
    left:10px; 
 
    background:red; 
 
    width:100px; 
 
    height:100px; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="plwid"></div>

Answer 2

你可能最好將文件上的moueup而不是元素。

$(document).mouseup(function(){ 
    clearTimeout(stopmov); 
}); 
$('.plwid').mousedown(function(){ 
    tomove(); 
}); 

其他問題是你正在使用的1毫秒是產生噸的命中，你需要選擇一個更合理的數字。

Answer 3

var mouseIsDown = false; 

function tomove(){ 
    $('.plwid').animate({ 
    left: '+=1' 
    },1); 
    if(mouseIsDown) setTimeout(function(){ tomove(); }, 1); 
} 

$('.plwid').mousedown(function(){ 
    mouseIsDown = true; 
    tomove(); 
}); 
$(document).mouseup(function(){ 
    mouseIsDown = false; 
}); 

Answer 4

貌似tomove運行時，它都會再次的setTimeout運行，而stopmov變量只會有非常最近...

所以，只取

stopmov=setTimeout(function(){ tomove(); }, 1); 

出來的第一個功能。當你停下來時調用settimeout。

var stopmov 
function tomove(){ 
    $('.plwid').animate({ 
     left: '+=1' 
},1); 
} 
$('.plwid').mouseup(function(){ 
    clearTimeout(stopmov); 
}).mousedown(function(){ 
    stopmov=setTimeout(function(){ tomove(); }, 1); 
});