Рекурсия при вызове метода в плагине для jQuery?

Question

[Jonh Doe]

Опираясь на этот перевод начал писать плагин (сладйер картинок).

Вообщем суть не в том, что делает плагин, а в том как.



Мне надо многократно вызвать один и тот-же метод плагина. Но тут у меня возникает ошибка. Алгоритм в методе следующий: Анимирую объект DOM -> автоинкремент переменной в data -> delay -> вызов этого же метода.



При втором вызове $(this) у меня undefined. — Не понимаю почему.



Но есть у меня предположение, что так делать неправильно, у меня не соовсем хороший алгоритм. Подскажите как написать правильно. Заранее спасибо.

Answer 1

[Валерий]

Скорее всего Вы вызываете метод как

methods.any();

А что если попробовать так?

methods.any.call(this);

Comments

[Jonh Doe]

Прокатило. Однако появляется следующий вопрос.

$(this).find('div.item').last().fadeOut(1000, function(){
	$(this).remove();
});

Куда тут запихнуть methods.next.call(this); и delay(3000);

Хотелось бы что-то типа такого:

$(this).find('div.item').last().fadeOut(1000,function(){ 
	$(this).remove().delay(3000).methods.next.call(this);;
});

Но при таком вызове вываливается Uncaught TypeError: Cannot read property 'start' of undefined

[Валерий]

Если правильно вас понял, то получается как то так:

var self = this;

$(this).find('div.item:last').fadeOut(1000, function(){ 
	$(this).remove();
	setTimeout(function(){
		methods.next.call(self);
	}, 3000);
});

[Jonh Doe]

В итоге у меня получилось

setTimeout("$('"+data.id+"').myPlugin('next')", data.timeout);

в data я в секции init кладу все что мне надо и потом вызываю в любом методе и все ок.

Просто изначально я хотел без setTimeout обойтись и использовать цепочки jQuery.

[Валерий]

$(data.id).delay(data.timeout).myPlugin('next');

Тогда можно так, наверное.
Но, честно говоря, никогда не пользовался $.delay(), т.к. она все равно реализована на таймаутах, я думаю )

Answer 2

[Сергей Протько]

Мне кажется вы изначально что-то не так сделали. вам стоит подучить раздел JavaScript по поводу контекста функции.

jsfiddle.net/kpVJv/ — из любопытства набросал простенький пример слайдера в виде jQuery плагина (самый простой, ничего инетересного), но может быть вы чего найдете интересного.

Comments

[Сергей Протько]

Маленькое замечание — все что взаимодействует с DOM в цикле стоит оборачивать в requestAnimationFrame. Это позволит вам избежать лишних итераций, скажем, если браузер свернули или просто перешли на другую вкладку. Порядком экономит ресурсы системы.

[Jonh Doe]

Спасибо, попробую разобраться.

Answer 3

[kotia]

Без кода трудно сказать наверняка, но первым делом — не стоит использовать $(this), лучше обращаться к ноде более явно. В случае с евентом, например — через e.target

Comments

[Jonh Doe]

Решил сделать по простому. setTimeout("$('#myElement').myPlugin('next')", 3000);
Так все работает.

Answer 4

[Никита Гусаков]

Разве внутри плагина обращение к объекту не через this, а не $(this), или я путаю?

Comments

[Jonh Doe]

Как сказано в той статье this это элемент массива dom. Но это не особо важно, т.к. при наличии в методе чего-то типа такого this.myPlugin('next') или $(this).myPlugin('next') в этот самый next ничего особо не попадает.
Я смутно, представляю почему.

Поэтому решил сделать таймаутами с явным обращением у элементу, как советовал kotia

Answer 5

[Михаил Крайнов]

setTimeout("$('"+data.id+"').myPlugin('next')", data.timeout);

Это не очень хорошее решение.
1) Вы передаёте стрингу, которая фактически эвалится.
2) В качестве выполняемой функции каждый раз будет дёргаться заново движок селекторов. И хотя это самый простой селектор, по id, это всё равно время и ресурсы.

Если очень хочется именно так написать, то:

var myPlugin = $(data.id).myPlugin
setTimeout(function(){ myPlugin('next') }, data.timeout);

developer.mozilla.org/ru/docs/DOM/window.setTimeout

Comments

[Jonh Doe]

Спасибо.