调用 clearTimeout 后，setTimeout 保持运行

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

您最好在文档而不是元素上添加 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>

调用 clearTimeout 后，setTimeout 保持运行

setTimeout keeps running after clearTimeout has been called

javascript

jquery

settimeout

jquery-animate

cleartimeout

调用 clearTimeout 后，setTimeout 保持 运行

setTimeout keeps running after clearTimeout has been called

javascript

jquery

settimeout

jquery-animate

cleartimeout

调用 clearTimeout 后，setTimeout 保持运行