使用setTimeout的自定义对象调用方法会丢失范围

Question

我在构建Javascript对象时遇到问题,并使用setTimeout调用该对象中的方法.我尝试了各种变通方法,但总是在循环的第二部分中,范围变为窗口对象而不是我的自定义对象.警告:我是javascript的新手.

我的代码:

$(function() {
 slide1 = Object.create(slideItem);
 slide1.setDivs($('#SpotSlideArea'));
 slide1.loc = 'getSpot';
 slide2 = Object.create(slideItem);
 slide2.setDivs($('#ProgSlideArea'));
 slide2.loc = 'getProg';
 slide2.slide = 1;
 setTimeout('triggerSlide(slide1)', slide1.wait);
 setTimeout('triggerSlide(slide2)', slide2.wait);
});

function triggerSlide(slideObject) {
 slideObject.changeSlide(slideObject);
}

var slideItem = {
 div1: null,
 div2: null,
 slide: 0,
 wait: 15000,
 time: 1500,
 loc: null,
 changeSlide: function(self) {
  this.slide ? curDiv = this.div1:curDiv = this.div2;
  $(curDiv).load(location.pathname + "/" + this.loc, this.slideGo(self));
 },
 setDivs: function(div) {
  var subDivs = $(div).children();
  this.div1 = subDivs[0];
  this.div2 = subDivs[1];
 },
 slideGo: function(self) {
  if(this.slide) {
   $(this.div2).animate({
    marginLeft: "-300px"
   }, this.time);
   $(this.div1).animate({
    marginLeft: "0"
   }, this.time);
   setTimeout('triggerSlide(self)', this.wait);
  } else {    
   $(this.div1).animate({
    marginLeft: "300px"
   }, this.time);
   $(this.div2).animate({
    marginLeft: "0"
   }, this.time);
   setTimeout('triggerSlide(self)', this.wait);
  }   
  this.slide ? this.slide=0:this.slide=1;
 }
}

我最近的尝试是构建帮助函数triggerSlide,以便我可以尝试通过我的方法传递对象的引用,但即使这样似乎也不起作用.

我可以使用setInterval但它可以工作,但是:

1. 我想确保在计时器重新启动之前动画已完成
2. 我不学习如何解决这个问题.:)

Answer 1

对于Javascript程序员开始使用该语言(以及使用Stackoverflow),这应该是必读的.

与Java不同,函数没有内在的"绑定"任何对象,无论它们是如何声明的.对象上下文的绑定仅在函数调用时发生.因此,当您将对函数的引用传递给类似"setTimeout"之类的东西时,从某个对象获取该函数并不重要.它只是一个函数,"setTimeout"将使用默认上下文 - window对象来调用它.

有很多方法可以解决这个问题(我不会称之为"问题";这是语言的一个事实,也是一个非常强大的事实).如果您使用的是某种框架,那就更容易了.

另一件事:您将超时和间隔处理程序绑定为包含代码的字符串.这是一个非常丑陋的练习,所以你应该习惯于形成函数表达式 - 即值为函数的表达式.

例如,对于"slideItem"处理程序,您可以这样做:

// ...
setTimeout(function() { slideItem.changeSlide(); }, 5000);

这样,超时机制调用的函数将始终使用"slideItem"对象作为上下文调用"changeSlide".你不需要"changeSlide"中的"self"参数,因为"this"将指向正确的对象.

[编辑]我注意到你实际上正在使用jQuery,这是一件好事.