js中的全局变量，如何避免它们 [英] global variables in js, how to avoid them

问题描述

我有一个使用 setInterval（）来重复动画的 change（）函数：

  function change（）{
 interval = setInterval（c，300）; 
函数c（）{...} 
c（）
} 
  

c（）函数可以完成这项工作。
我还有一个 stop（）函数，它可以停止所有动画并恢复初始状态：

 函数stop（）{
 clearInterval（interval）; 
 ... 
}; 
  

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

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

 函数Animator（）{
 var id; 
 
 return {
 start：start，
 stop：stop，
}; 
 
函数start（）{
 id = requestAnimationFrame（go）; 
} 
 
 function stop（）{
 clearAnimationFrame（id）; （$ i 
 
 
 
 $ b $（$ i 
 
 $ b var num = randNum（0，img.length-1）
 var btn = img [i] .nextSibling.nextSibling.childNodes [1] 
 img [i] .setAttribute（src，img_path [NUM]。路径）; 
 $（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'）} 
 $ b $ id = requestAnimationFrame ）
} 
 
 
} 
  

基本上当用户按下按钮，图像开始改变它们的宽度和高度以及它们的颜色。
这是其余部分：

  var animator = new Animator（）; 
 
函数stop（）{// fn与停止按钮相关
 animator.stop（）}; 
 
 
 function function change（）{// fn与启动按钮相关
 animator.start（）} 
  

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

$ p $ function change（）{

interval = setInterval（c，300）;
函数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 func？
谢谢

编辑：现在它可以工作（我正在处理另一个文件:)）但我遇到了停止按钮问题$ b $在原始JavaScript中，您可以执行以下操作：使用ES5：

使用ES5：

 函数Animator（）{
 var id; 
 
 return {
 start：start，
 stop：stop，
}; 
 
函数start（）{
 id = requestAnimationFrame（go）; 
} 
 
 function stop（）{
 clearAnimationFrame（id）; 
 
 
函数go（）{
 
 //增加动画... 
 
 if（shouldContinue（））{ /你定义`shouldContinue` 
 id = requestAnimationFrame（go）; 
} 
} 
} 
 
 var animator = new Animator（）; 
 animator.start（）; 
 // ... 
 animator.stop（）
  

I have a change() function that uses a setInterval() to repeat an animation:

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

The c() function does the work. I also have a stop() function that stops all the animation and restore the initial situation:

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

I've read that is better use the var keyword instead declaring a global variable. But I cannot get access from the stop() function to interval if I do so. Declaring interval outside the change() function also gives me a problem.

ok i'm trying the last solution proposed by Ben Aston. Here the code:

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)
                }


 } 

basically when the user press a button, the images start to change their width and height and their color. this is the rest:

var animator = new Animator();

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


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

I dont know how to use requestAnimationFrame properly, i'm studying it right now. but when i press the start button the images change just one time and then they stopped. In the previous code i had a for loop that did the work:

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()}

I admit that i dont have quite clear how to implement the go func? thanks

edit: now it works (i was working with another file :)) but i have problem with the stop button

解决方案

In raw JavaScript you could do the following:

Using 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()

这篇关于js中的全局变量，如何避免它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！