2016-03-16 2 views
1

У меня есть div с несколькими элементами p в нем, и я петлю через них с помощью jQuery, чтобы вызвать щелчок на следующем элементе каждые 5 секунд. Теперь мои вопросы, как я могу перезапустить цикл, когда был нажат последний элемент?Перезапуск интервала jQuery после достижения последнего элемента

Это мой JQuery код:

jQuery('.clickMe').each(function (ind, elem) {  
    window.setTimeout(function() { 
     jQuery(elem).trigger("click"); 
    }, 5000 * ind);   
}); 

Это мой HTML упаковывают вы хотите увидеть это :)

<div class='slider-circles'> 
    <p class='transparent-cricles clickMe'></p> 
    <p class='transparent-cricles clickMe'></p> 
    <p class='transparent-cricles clickMe'></p> 
    <p class='transparent-cricles clickMe'></p> 
    <p class='transparent-cricles clickMe'></p> 
    <p class='transparent-cricles clickMe'></p> 
</div> 
+1

используйте счетчик и сбросьте его, как только он достигнет последнего элемента. – RRR

+0

Для чего нужен счетчик? –

ответ

1
var ps=jQuery('.clickMe') 
if (ps.length) { 
    var index=0; 
    setInterval(function() { 
     ps.eq(index).trigger("click"); 
     index=(index+1)%ps.length; 
    },5000); 
} 
+0

Это самое простое решение IMO Большое спасибо! –

0
$(function(){ 
window.setInterval(function(){ 
    logic(); 
}, 600); 
}); 

function logic(){ 
    window.setTimeout(function() { 
     $('.clickMe').each(function (ind, elem) {  
     window.setTimeout(function() { 
      $(elem).hide(); 
      if(ind % 5 == 0) $('.clickMe').show(); 
      console.log(ind); 
     }, 100 * ind);   
     }); 
    },600); 
} 

скрипку: https://jsfiddle.net/3how0tm0/1/

необходимо перезагрузить их после каждого цикла. Чтобы визуализировать, я скрываю и показываю ваши <p> -tags. Вам нужно добавить и удалить триггерное событие.

0

Добавить и удалить класс, чтобы узнать, что вы нажали.

var initiliazeClicks = function() { 
    jQuery('.clickMe').each(function(ind, elem) { 
    window.setTimeout(function() { 


    jQuery(elem).addClass('clicked').removeClass('clickMe').trigger('click'); 

      if (jQuery('.clickMe').length == 0) { 
      jQuery('.clicked').removeClass('clicked').addClass('clickMe'); 
      initiliazeClicks(); 

      } 

     }, 5000 * ind); 
     }); 

    }; 


    initiliazeClicks(); 

пример: https://jsfiddle.net/zsek6c2a/

0

После последнего клика, запустить все щелкать еще раз:

function run_clicking(elements) { 
    var last_index = elements.length - 1; 
    elements.each(function() (index, elem) { 
        window.setTimeout(function() { 
         jQuery(elem).trigger("click"); 
         if(index == last_index) { 
          // when last element, run it again (after 5s) 
          window.setTimeout(function() { 
            run_clicking(elements); 
          }, 5000); 
         } 
        }, 5000 * index); 
    } 
} 
run_clicking(jQuery('.clickMe')); 
0

Используйте пользовательскую функцию для перезапуска цикла, когда последний элемент достиг:

function performInfiniteClick(){ 
    var len = performInfiniteClick.counter; 
    $('.clickMe').each(function (i, el) { 
    window.setTimeout(function() { 
     $(el).trigger("click"); 
     len--; 
     if (!len) { 
      performInfiniteClick(); 
     } 
    }, 1000 * i);   
    }); 
    return true; 
} 
performInfiniteClick.counter = $('.clickMe').length; 

performInfiniteClick(); 

https://jsfiddle.net/7g3eo93m/