Javascript 我怎样才能在这里停止设置超时？

我试图实现的行为是：

在悬停/鼠标输入时，将背景图像从占位符更改为gif，其位置会发生变化以实现动画效果，然后在鼠标离开时返回占位符

我的代码是

    $('.filmstrip').mouseenter(function(){
        var $that = $(this),
               w = $that.width(),
              fr = $that.attr('data-framerate');
        $that.css('background-image','url('+$that.attr('data-gifurl')+')');
        for ( var i = 1, n = $that.attr('data-ticks'); i <= n; ++i )
        {
            (function(j){
               setTimeout(function(){
                  $that.css('background-position-x','-'+(w*j)+'px');
               }, j*fr);
            })(i);
        }
        $that.bind('mouseleave',function(){
            $that.css('background-image','url('+$that.attr('data-placeholder')+')').css('background-position-x','0');
        });
    }); 

部分

$that.css('background-image','url('+$that.attr('data-placeholder')+')').css('background-position-x','0');
            });

---

不工作，因为动画仍在移动背景位置。因此，如果

setTimeout

没有完成运行，我需要一些方法首先停止它。你知道我该怎么做吗？

你可以使用

clearTimeout

停止

setTimeOut

工作演示-

var-myVar；
函数myFunction（）{
myVar=setTimeout（函数（）{alert（“Hello”）；}，3000）；
}
函数myStopFunction（）{
清除超时（myVar）；
}

等待3秒钟后，单击第一个按钮以警告“Hello”

单击第二个按钮以阻止执行第一个函数。（您必须在3秒钟结束前单击它。）

试试看

---

停止警报U可以使用

清除超时

停止

设置超时

工作演示-

var-myVar；
函数myFunction（）{
myVar=setTimeout（函数（）{alert（“Hello”）；}，3000）；
}
函数myStopFunction（）{
清除超时（myVar）；
}

等待3秒钟后，单击第一个按钮以警告“Hello”

单击第二个按钮以阻止执行第一个函数。（您必须在3秒钟结束前单击它。）

试试看 停止警报添加停止变量：

$('.filmstrip').mouseenter(function(){
    var isStopped = false;
    var $that = $(this),
           w = $that.width(),
          fr = $that.attr('data-framerate');
    $that.css('background-image','url('+$that.attr('data-gifurl')+')');
    for ( var i = 1, n = $that.attr('data-ticks'); i <= n && !isStopped; ++i )
    {
        (function(j){
           setTimeout(function(){
              if (!isStopped) {
                  $that.css('background-position-x','-'+(w*j)+'px');
              }
           }, j*fr);
        })(i);
    }
    $that.bind('mouseleave',function(){
        isStopped = true;
        $that.css('background-image','url('+$that.attr('data-placeholder')+')').css('background-position-x','0');
    });
});

$（'.filmstrip'）.mouseenter（函数（）{
var=false；
var$that=$（this），
w=$that.width（），
fr=$that.attr（'data-framerate'）；
$that.css（'background-image'，'url（+$that.attr（'data-gifull'）+'））；
对于（var i=1，n=$that.attr（'data-ticks'）；i添加一个停止变量：

$('.filmstrip').mouseenter(function(){
    var isStopped = false;
    var $that = $(this),
           w = $that.width(),
          fr = $that.attr('data-framerate');
    $that.css('background-image','url('+$that.attr('data-gifurl')+')');
    for ( var i = 1, n = $that.attr('data-ticks'); i <= n && !isStopped; ++i )
    {
        (function(j){
           setTimeout(function(){
              if (!isStopped) {
                  $that.css('background-position-x','-'+(w*j)+'px');
              }
           }, j*fr);
        })(i);
    }
    $that.bind('mouseleave',function(){
        isStopped = true;
        $that.css('background-image','url('+$that.attr('data-placeholder')+')').css('background-position-x','0');
    });
});

$（'.filmstrip'）.mouseenter（函数（）{
var=false；
var$that=$（this），
w=$that.width（），
fr=$that.attr（'data-framerate'）；
$that.css（'background-image'，'url（+$that.attr（'data-gifull'）+'））；
对于（var i=1，n=$that.attr（'data-ticks'）；i您可以使用基于区间的解决方案，如


$（'.filmstrip'）.mouseenter（函数（）{
var$that=$（this），
w=$that.width（），
fr=+$that.attr（'data-framerate'），
ticks=+$that.attr（'data-ticks'）；
$that.css（'background-image'，'url（'+$that.attr（'data-gifull'）+'））；
var计数器=0；
var interval=setInterval（函数（）{
$that.css（'background-position-x'，'-'+（w*++计数器）+'px'）；
如果（计数器>=滴答声）{
间隔时间；
}
}，fr）；
$（此）.data（'bg-interval'，interval）
}).mouseleave（函数（）{
clearInterval（$（this）.data（'bg-interval'））；
$（this.css（'background-image'，'url（+$（this.attr（'data-placeholder'）+'）））.css（'background-position-x'，'0'）；
})；
.filmstrip{
高度：64px；
边框：1px纯灰；
背景位置：右；
background-position-y：继承；
显示：内联块；
宽度：64px；
}
您可以使用基于时间间隔的解决方案，如


$（'.filmstrip'）.mouseenter（函数（）{
var$that=$（this），
w=$that.width（），
fr=+$that.attr（'data-framerate'），
ticks=+$that.attr（'data-ticks'）；
$that.css（'background-image'，'url（'+$that.attr（'data-gifull'）+'））；
var计数器=0；
var interval=setInterval（函数（）{
$that.css（'background-position-x'，'-'+（w*++计数器）+'px'）；
如果（计数器>=滴答声）{
间隔时间；
}
}，fr）；
$（此）.data（'bg-interval'，interval）
}).mouseleave（函数（）{
clearInterval（$（this）.data（'bg-interval'））；
$（this.css（'background-image'，'url（+$（this.attr（'data-placeholder'）+'）））.css（'background-position-x'，'0'）；
})；
.filmstrip{
高度：64px；
边框：1px纯灰；
背景位置：右；
background-position-y：继承；
显示：内联块；
宽度：64px；
}
使用CSS而不是javascript可能会更好

选项#1-使用实际GIF
您可以将要设置动画的帧编译为实际的GIF文件，然后根据悬停更改背景图像：

<div class="filmstrip"></div>

选项2-使用CSS3动画
您可以将动画图像保留为一条帧（已知长度），然后使用以下内容：

<div class="filmstrip"></div>

选项#3-使用
Sprity是一个jQuery插件，它似乎可以管理将电影带/精灵图像转化为动画的所有元素，包括能够启动/停止动画、重置到第一帧、更改FPS等。
这可能是使用CSS而不是javascript更好的方法

选项#1-使用实际GIF
您可以将要设置动画的帧编译为实际的GIF文件，然后根据悬停更改背景图像：

<div class="filmstrip"></div>

选项2-使用CSS3动画
您可以将动画图像保留为一条帧（已知长度），然后使用以下内容：

<div class="filmstrip"></div>

选项#3-使用
Sprity是一个jQuery插件，它似乎可以管理将电影带/精灵图像转化为动画的所有元素，包括能够启动/停止动画、重置到第一帧、更改FPS等