Question

我有change()函数使用setInterval()重复动画：

function change(){
    interval = setInterval(c,300);
    function c(){...}
    c()
}

c()功能完成了工作。我还有一个stop()函数可以停止所有动画并恢复初始状态：

function stop(){
    clearInterval(interval);
    ...
};

我已经读过，最好使用var关键字来声明全局变量。但如果我这样做，我无法从stop()函数访问interval。在interval函数之外声明change()也会给我一个问题。

好的我正在尝试Ben Aston提出的最后一个解决方案。代码如下：

function Animator() {
  var id;

  return {
    start: start,
    stop: stop,
  };

  function start() {
    id = requestAnimationFrame(go);
  }

  function stop() {
    clearAnimationFrame(id);
  }

  function go() {
    // increment the animation
        for (var i=0;i<img.length;i++){
                var num = randNum(0,img.length-1)
                var btn = img[i].nextSibling.nextSibling.childNodes[1]
                    img[i].setAttribute("src",img_path[num].path);
                        $(btn).css({"background-color":img_path[num].color,"border":"4px solid"+img_path[num].color});
                        $(img[i]).animate({width: "-=80px", height: "-=80px"},'slow');
                        $(img[i]).animate({width: "+=80px", height: "+=80px"},'slow')}

            id = requestAnimationFrame(go)
                }


 }

基本上当用户按下按钮时，图像开始改变它们的宽度和高度以及它们的颜色。剩下的就是：

var animator = new Animator();

function stop(){ //fn related to the stop button
    animator.stop()};


function change(){ //fn related to the start button
    animator.start()}

我不知道如何正确使用requestAnimationFrame，我现在正在研究它。但是当我按下开始按钮时，图像只会改变一次然后停止。在之前的代码中，我有一个for循环来完成工作：

function change(){

    interval = setInterval(c,300);
    function c(){
                for (var i=0;i<img.length;i++){
                    var num = randNum(0,img.length-1)
                    var btn = img[i].nextSibling.nextSibling.childNodes[1]
                        img[i].setAttribute("src",img_path[num].path);
                            $(btn).css({"background-color":img_path[num].color,"border":"4px solid"+img_path[num].color});
                            $(img[i]).animate({width: "-=80px", height: "-=80px"},'slow');
                            $(img[i]).animate({width: "+=80px", height: "+=80px"},'slow')}}
    c()}

我承认我不太清楚如何实现go功能？感谢

编辑：现在它可以工作（我正在使用另一个文件:)）但我有停止按钮的问题

Answer 1

您也可以使用Closure，请阅读此处的文档： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures 使用Closure，您可以定义私有和公共功能。

Answer 2

在原始JavaScript中，您可以执行以下操作：

使用ES5：

function Animator() {
  var id;

  return {
    start: start,
    stop: stop,
  };

  function start() {
    id = requestAnimationFrame(go);
  }

  function stop() {
    clearAnimationFrame(id);
  }

  function go() {

    // increment the animation...

    if(shouldContinue()) { // you define `shouldContinue`
      id = requestAnimationFrame(go);
    }    
  }
}

var animator = new Animator();
animator.start();
// ...
animator.stop()

Answer 3

使用闭包和设置间隔时，事情正常：

var Button_Obj = function(){
  var intervalID;

  function start(){
    return intervalID = setInterval(change,300) //change is the function that do the animation with a loop, i keep it private
  };
function stop(){
    clearInterval(intervalID)
    };
return {start : start, stop : stop}

现在在全球空间我只有：

var btn_trigger = new Button_Obj();

并在按钮标签中输入：

<button style="border:1px solid #9dbbe4;" class="change-button" id="change-order"  onclick="btn_trigger.start()"  type="button">Start Moving</button>

现在全球空间更干净，这个implmentation工作，RequestAnimationFrame我有一些问题，但我会在以后尝试它

js中的全局变量，如何避免它们

3 个答案: