重新启动/刷新Javascript函数或计时器

我的网站上有以下代码

此时，当单击“测试1”时，动画开始。之后，当单击“测试2”或“测试3”时，动画不会重新启动

单击任何链接时，如何重新启动动画

在点击链接后，是否有可能进行淡入淡出

HTML标记：

<div id="anim"></div>

</br>
</br>

<li id="item1"><span></span><a href="#">Test 1</a></li>
<li id="item2"><span></span><a href="#">Test 2</a></li>
<li id="item3"><span></span><a href="#">Test 3</a></li>

#anim {
  width: 14px; height: 14px;
  background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png);
  background-repeat: no-repeat; 
}

var scrollUp = (function () {
    var timerId, height, times ,i = 0 , element; 

    return {
        stop : function(){
            clearInterval( timerId );
        },
        init :function( h, t, el ){
            height = h;
            times = t;
            element =el ;
        },
        start : function ( ) {
            timerId = setInterval(function () {
              if (i > times) // if the last frame is reached, set counter to zero
                clearInterval(timerId);
              element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
              i++;
            }, 100); // every 100 milliseconds
          }
    };
})();

scrollUp.init(14, 40, document.getElementById('anim'));

// start animation:
document.getElementById('item1').addEventListener('click', function(){
    scrollUp.start();
}, false );

Javascript:

<div id="anim"></div>

</br>
</br>

<li id="item1"><span></span><a href="#">Test 1</a></li>
<li id="item2"><span></span><a href="#">Test 2</a></li>
<li id="item3"><span></span><a href="#">Test 3</a></li>

#anim {
  width: 14px; height: 14px;
  background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png);
  background-repeat: no-repeat; 
}

var scrollUp = (function () {
    var timerId, height, times ,i = 0 , element; 

    return {
        stop : function(){
            clearInterval( timerId );
        },
        init :function( h, t, el ){
            height = h;
            times = t;
            element =el ;
        },
        start : function ( ) {
            timerId = setInterval(function () {
              if (i > times) // if the last frame is reached, set counter to zero
                clearInterval(timerId);
              element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
              i++;
            }, 100); // every 100 milliseconds
          }
    };
})();

scrollUp.init(14, 40, document.getElementById('anim'));

// start animation:
document.getElementById('item1').addEventListener('click', function(){
    scrollUp.start();
}, false );

---

这里有一个问题：

据我所知，如果单击其中一个按钮，您希望动画（无论当前处于何种状态）重新启动吗

如果是这样的话，首先您应该在

启动之前每次调用
停止
函数：

document.getElementById('item1').addEventListener('click', function(){
    scrollUp.stop();
    scrollUp.start();
}, false );

var items = document.querySelectorAll('#item1, #item2, #item3');

for (var i = 0, l = items.length; i < l; i++) {
    items[i].addEventListener('click', function () {
        scrollUp.restart();
    }, false);
}

此外，必须在
停止中重置索引：

stop : function(){
    clearInterval( timerId );
    i = 0;
},

这将完成按钮
#item1
的工作。将这一点应用到其他方面现在应该不是什么大问题。例如，将事件绑定到
并读取目标：

function startAnimation(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target = target.parentNode;

    if (!target.id.match(/item[0-3]/)) {
        return e;
    }

    scrollUp.stop();
    scrollUp.start();
}

document.body.addEventListener('click',startAnimation,false);


单击任何链接时，如何重新启动动画

要定义
重新启动
，您需要
停止
任何仍在运行的间隔，将
i
重置为
0
，因为这标志着“开始”，并且
开始
一个新的间隔：

return {
    // ...

    restart: function () {
        this.stop();
        i = 0;
        this.start();
    }
};

然后，您需要绑定到每个
li
，以便它们都可以执行
重新启动（）
：

var items=document.querySelectorAll（'item1，'item2，'item3'）；
对于（变量i=0，l=items.length；i
我把你的小提琴改成：

似乎您没有重置“i”变量，因此动画无法从一开始重新启动（即从“零”）；我离开了警戒线（但被注释掉），向您展示我是如何得出结论的：

          if (i > times) // if the last frame is reached, set counter to zero
          {
              //alert(i + ' > ' + times);
              clearInterval(timerId);
              i = 0;
          }
          else
          {
              element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
              i++;
          }

当然，我添加了一些线条，将启动动画的单击事件绑定到其他两个链接（只是为了完整性）。现在，在第二次动画重新启动时单击。这就是你需要的吗

编辑：链接到小提琴校正
我将使用

而不是

。