У меня есть проблема с созданием объекта 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, и он работает, однако:
Это обязательное чтение для программистов Javascript, начинающих работать с языком (и с Stackoverflow).
В отличие от Java, здесь нет внутренней «привязки» функций к какому-либо объекту, независимо от того, как они объявлены. Связывание контекста объекта происходит только во время вызова функции. Таким образом, когда вы передаете ссылку на функцию чему-то вроде "setTimeout", совершенно не имеет значения, что вы получили функцию от какого-то объекта. Это просто функция, и setTimeout вызовет ее с контекстом по умолчанию - объектом window
.
Есть много способов справиться с этим (и я не буду называть это «проблемой»; это факт языка, и он очень мощный). Если бы вы использовали какой-то фреймворк, было бы проще.
Еще один момент: вы привязываете обработчики тайм-аута и интервалов как строки, содержащие код. Это довольно уродливая практика, поэтому вам следует привыкнуть к формированию функциональных выражений, то есть выражений, значения которых являются функциями.
Например, для обработчика "slideItem" вы можете сделать следующее:
// ...
setTimeout(function() { slideItem.changeSlide(); }, 5000);
Таким образом, функция, вызываемая механизмом тайм-аута, всегда будет вызывать changeSlide с вашим объектом "slideItem" в качестве контекста. Вам не нужен этот параметр «self» в «changeSlide», потому что «this» будет указывать на нужный объект.
[edit] Замечу, что вы на самом деле в некоторой степени используете jQuery, и это хорошо.
Я не могу проверить этот код прямо сейчас, но это поможет?
setTimeout(function(){triggerSlide(slide1)}, slide1.wait);
Это jQuery, правильно? Существует параметр обратного вызова animate ()
; передайте функцию, которую хотите вызвать после завершения анимации, и jQuery позаботится о ее вызове. Обратный вызов должен фиксировать область, которую вы хотите просто хорошо.