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动画的完成回调中使用递归调用。

$('.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>

setTimeout在调用clearTimeout后继续运行

4 个答案: