Приостановка setTimeout при .click (jQuery) - PullRequest
0 голосов
/ 22 марта 2012

У меня есть скрипт jQuery, скользящий по нескольким div. Код ниже. У меня есть две проблемы, которые мне нужно решить:

  1. Сброс или добавление в таймер, когда пользователь нажимает на вкладку. В настоящий момент он может немедленно переключиться на следующий слайд в зависимости от того, где он находится в цикле.

  2. Приостановка таймера (то есть очистка тайм-аута и повторный запуск), когда пользователь наводит курсор на определенный слайд.

Чтобы выполнить это, я присвоил setTimeout переменную ($ theTimeout), попытался очиститьTimeout и снова запустить show_cycle_elem (). Независимо от того, сколько разных способов я пытался это сделать (бросая другие мои события, такие как щелчок, в функции, затем вызывая их сразу после setTimeout и т. Д.), Это не сработало полностью.

Есть идеи?

$(document).ready( function(){
var theId = 0;
function navClass(it){
    $('#hero nav a').removeClass('over');
    $(it).addClass('over');
}
$.fn.cycle = function(timeout){
    var $all_elem = $(this);
    show_cycle_elem = function(){
        if(theId == $all_elem.length) theId = 0;
        $all_elem.hide().eq(theId).fadeIn();
        navClass('#a' + theId);
        var $theTimeout = setTimeout(function(){show_cycle_elem(++theId)}, timeout);
    }
    show_cycle_elem();
}
$('div.hero_slide').cycle(10000);
$('#hero nav a').click( function(party){
    party.preventDefault();
    theId = this.id.substr(1);
    navClass($(this));
    $('.hero_slide').hide();
    $('#hero' + theId).fadeIn();
});
});

Спасибо.

1 Ответ

1 голос
/ 22 марта 2012

Ха, похоже, ты пытаешься создать плавный слайдер с несколькими вариантами ... У меня была такая идея несколько месяцев назад, я думаю, на самом деле это не так просто, как кажется.Для начала мы используем jQuery, поэтому мы могли бы также написать его в формате плагина, так как нам потребуется область, в которой мы можем объявлять и использовать переменные, которые меняются со временем по желанию ...

I 'просто перейду к погоне;если вы хотите работать со слайдами / приостанавливать их, вам нужно контролировать идентификатор тайм-аута, сохранить его и при необходимости очистить тайм-аут, чтобы предотвратить анимацию следующего слайда ...

Мне понадобилось разобраться, ноВот моя рабочая версия, имеющая только некоторые базовые функции, но вы можете, по крайней мере, запустить / остановить ее и сделать следующее / prev / rand:

http://jsfiddle.net/sg3s/RFJMy/218/

Так что если вы хотите создать плагин/ функциональность, которая выполняет то, что вы описываете, вам нужно будет переписать хорошую часть вашего кода, чтобы иметь базу, которая может фактически обрабатывать прерывания в логическом смысле.

...