Javascript setTimeout作用域引用错误的变量

我已经编写了一个小函数来循环一个sprite表。在函数中，我有一个settimeout，它在帧之间循环。在最后一帧，超时被清除，计数器设置为零，动画再次开始

这在一个动画中效果很好，但当我尝试调用许多动画时，它们都开始循环，但都失败了，除了designSprite，它非常愉快地循环。我最后称之为设计精灵动画

所以我猜问题是因为当我调用函数的新intance时变量被覆盖了-setTimeOut引用了新变量？？我把自己弄糊涂了。我尝试过修复它，但一直失败

谢谢， 抢劫

//保存精灵坐标的数组。
var animationSprite=[{“X”：“-2”，“Y”：“-2”}；
变量mediaSprite=[{“X”：“-2”，“Y”：“-2”}；
var filmSprite=[{“X”：“-2”，“Y”：“-2”}；
var designSprite=[{“X”：“-2”，“Y”：“-2”}；
//调用loopAnim函数，传入sprite数组和div的id
loopAnim（animationSprite，#animationFrame'）
loopAnim（mediaSprite，#mediaFrame'）
loopAnim（电影精灵，电影框架）
loopAnim（设计精灵“#设计框架”）
函数loopAnim（精灵，帧ID）{
var totalFrames=sprite.length；//计算sprite数组中的“帧”数。
var count=0；//设置一个基本计数器来计算我们在哪个帧上。
var theLoop=function（）{
//通过从精灵阵列读取X&Y坐标来移动帧的背景位置。
$（frameID）.css（“背景位置”，精灵[count].X+“px”+精灵[count].Y+“px”）；
count++；//在每个循环中，将帧增加1
//如果计数小于总帧数，请设置超时以保持运行“theLoop”函数
如果（计数<总帧数）{
setAnim=setTimeout（theLoop，60）；
//如果计数大于总帧数-清除超时。将计数器重置为零，然后再次运行循环函数
}否则{
清除超时（setAnim）；
计数=0；
theLoop（）；
}
}
theLoop（）；
}

setAnim

看起来好像没有声明，这意味着它是一个全局变量。这意味着您对

loopAnim

的所有调用都在使用并覆盖相同的计时器ID引用。

setAnim

看起来没有声明，这意味着它是一个全局变量。这意味着您对

loopAnim

的所有调用都在使用并覆盖相同的计时器ID引用。

setAnim

看起来没有声明，这意味着它是一个全局变量。这意味着您对

loopAnim

的所有调用都在使用并覆盖相同的计时器ID引用。

setAnim

看起来没有声明，这意味着它是一个全局变量。这意味着您对

loopAnim

的所有调用都在使用并覆盖相同的计时器ID引用。

我是个白痴。。。我只是浪费了一个小时的大部分时间试图弄明白这个问题。。。啊啊啊！！！感谢您的帮助：）@Rob The joys of JavaScript编程：）一个建议：我强烈建议您在代码中使用“use strict”。这有助于抓住像这样的东西。我是个白痴。。。我只是浪费了一个小时的大部分时间试图弄明白这个问题。。。啊啊啊！！！感谢您的帮助：）@Rob The joys of JavaScript编程：）一个建议：我强烈建议您在代码中使用“use strict”。这有助于抓住像这样的东西。我是个白痴。。。我只是浪费了一个小时的大部分时间试图弄明白这个问题。。。啊啊啊！！！感谢您的帮助：）@Rob The joys of JavaScript编程：）一个建议：我强烈建议您在代码中使用“use strict”。这有助于抓住像这样的东西。我是个白痴。。。我只是浪费了一个小时的大部分时间试图弄明白这个问题。。。啊啊啊！！！感谢您的帮助：）@Rob The joys of JavaScript编程：）一个建议：我强烈建议您在代码中使用“use strict”。它有助于捕捉像这样的东西。

// Arrays to hold our sprite coordinates.
var animationSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
var mediaSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
var filmSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
var designSprite=[{"X":"-2","Y":"-2"},........ etc etc ];

// call the loopAnim function, passing in the sprite array, and id of the div
loopAnim(animationSprite ,'#animationFrame')
loopAnim(mediaSprite ,'#mediaFrame')
loopAnim(filmSprite ,'#filmFrame')
loopAnim(designSprite ,'#designFrame')



function loopAnim(sprite , frameID) {

  var totalFrames = sprite.length; // count how many 'frames' are in our sprites array.
  var count = 0; // set up a basic counter to count which frame we're on.
  var theLoop = function(){
        // Move the background position of our frame by reading the X & Y co-ordinates from the sprites array.
      $(frameID).css("background-position" , sprite[count].X + "px " + sprite[count].Y + "px");
      count++; // increment the frame by 1 on each loop

      // if count is LESS than total number of frames, set a timeout to keep running the "theLoop" function              
        if (count < totalFrames){
            setAnim = setTimeout(theLoop, 60);
      // if count is greater than the total number of frames - clear our timeout. Reset the counter back to zero, and then run our loop function again
        } else {
            clearTimeout(setAnim);
            count = 0;
            theLoop();
        }
  }
  theLoop();
}