javascript - 在调用clearTimeout之后，setTimeout继续运行

我正在对一个对象进行动画处理，以使其在鼠标按下时向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/

最佳答案

我玩过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>