javascript - 调用 clearTimeout 后 setTimeout 继续运行

Question

我正在为一个对象设置动画以在鼠标按下时移动到 1 个方向，当鼠标 clic 上升时，动画应该停止。

我正在使用 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

您最好在文档而不是元素上添加 moueup。

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

另一个问题是您使用的 1 毫秒会产生大量点击，您需要选择一个更合理的数字。

Answer 2

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 3

看起来每次 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);
});

Answer 4

我玩过setTimeout，setInterval但我认为最好在 jQuery animate 的 done 回调中使用递归调用。

使用 . 停止也很容易$('.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>