起动和起动；通过计时器停止Javascript函数

我的网站上有以下代码

首先，如何通过单击链接启动动画/功能

那么，如何“冻结”动画中的最后一帧？（可能是通过计时器？）

谢谢

HTML标记：

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

#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; // stored timer in case you want to use clearInterval later

  return function (height, times, element) {
    var i = 0; // a simple counter
    timerId = setInterval(function () {
      if (i > times) // if the last frame is reached, set counter to zero
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
      i++;
    }, 100); // every 100 milliseconds
  };
})();

// start animation:
scrollUp(14, 42, document.getElementById('anim'))

Javascript:

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

#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; // stored timer in case you want to use clearInterval later

  return function (height, times, element) {
    var i = 0; // a simple counter
    timerId = setInterval(function () {
      if (i > times) // if the last frame is reached, set counter to zero
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
      i++;
    }, 100); // every 100 milliseconds
  };
})();

// start animation:
scrollUp(14, 42, document.getElementById('anim'))

---

这里有一个问题：

您的代码已经准备好了，请阅读第二行：

  var timerId; // stored timer in case you want to use clearInterval later

setInterval用于定义一个函数，该函数在 一定的间隔。clearInterval用于停止此操作。在…的结尾 您的动画，而不是重置帧计数器i为0使用clearInterval 要同时停止动画，请执行以下操作：

        if (i > times) { 
            clearInterval(timerId);
        }

---

这里有一些额外的调试输出：

嗨，你能返回js对象句柄start和stop吗。。由于

timerId

作为私有，我们无法从外部函数访问

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 the last frame is reached, set counter to zero
              if (i > times) {
                i = 0;
              }
              //scroll up         
              element.style.backgroundPosition = "0px -" + i * height + 'px'; 
              i++;
            }, 100); // every 100 milliseconds
          }
    };
})();

请参阅中的完整操作。希望这对你有帮助