Пользовательские методы вызова методов с setTimeout теряют область видимости - PullRequest
Новая
       16

Пользовательские методы вызова методов с setTimeout теряют область видимости

10 голосов
/ 25 февраля 2010

У меня проблема с созданием объекта 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. Я не учусь, как обойти эту проблему таким образом. :)

Ответы [ 3 ]

15 голосов
/ 25 февраля 2010

Это должно быть обязательным чтением для программистов на Javascript, начинающих работать с языком (и с Stackoverflow).

В отличие от Java, нет никакого внутреннего "связывания" функций с любым объектом, независимо от того, как они объявлены. Привязка контекста объекта происходит только во время вызова функции. Таким образом, когда вы передаете ссылку на функцию в нечто вроде «setTimeout», совершенно не имеет значения, что вы получили функцию из какого-то объекта. Это просто функция, и setTimeout будет вызывать ее с контекстом по умолчанию & mdash; window объект.

Есть много способов справиться с этим (и я не буду называть это «проблемой»; это факт языка и очень мощный). Если бы вы использовали какой-то фреймворк, это было бы проще.

Другое дело: вы связываете свои обработчики тайм-аута и интервала как строки, содержащие код. Это довольно уродливая практика, поэтому вы должны привыкнуть к формированию выражений функций & mdash; то есть выражения, значения которых являются функциями.

Например, для вашего обработчика slideItem вы можете сделать следующее: 

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

Таким образом, функция, вызываемая механизмом тайм-аута, всегда будет вызывать «changeSlide» с вашим объектом «slideItem» в качестве контекста. Вам не нужен этот параметр «self» в «changeSlide», потому что «this» будет указывать на нужный объект.

[править] Я отмечаю, что вы на самом деле используете jQuery, и это хорошо.

0 голосов
/ 25 февраля 2010

Это jQuery, верно? Существует параметр обратного вызова для animate(); передайте ему функцию, которую вы хотите вызвать после завершения анимации, и jQuery позаботится о ее вызове. Обратный вызов должен просто захватывать желаемую область.

0 голосов
/ 25 февраля 2010

Я не могу проверить этот код прямо сейчас, но помогает ли это? 

setTimeout(function(){triggerSlide(slide1)}, slide1.wait);
...