Задержка при переборе каждого блока

110

25 октября 2021, 14:20

На странице есть несколько блоков, я прохожусь по каждому с помощью кода:

 $('#wrap .block').each(function() {
      ....
 }

Внутри этого перебора я делаю клик по ссылке ( trigger('click') ) и мне нужно чтобы переход к разбору следующего блока началось спустя 3 секунд после текущего.

То есть что-то вроде:

 $('#wrap .block').each(function() {
      .....trigger('click');
      -- ждем 3 секунды ---
      -- делаем что нужно ---
      -- и переходим к следующему блоку --
 }

Буду благодарен за помощь.

Answer 1

Функция внутри each получает номер текущего элемента в качестве аргумента. Можно использовать его, чтобы поставить таймаут, кратный индексу... * 3000 миллисекунд.

$('#wrap .block').each(function(index) { 
  var t = $(this); 
  setTimeout(function(){ 
    // Ваш код 
    t.text( index ).css('background-color', '#999'); 
  }, 3000 * index); 
});

#wrap { display: flex; } 
 
.block { 
  width: 50px; 
  height: 50px; 
  margin: 5px; 
  background-color: orange; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div id="wrap"> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
</div>

Можно было выполнить то же самое без each, через setInterval... но он тикает бесконечно, если его не остановить. Придется немного заморочиться)

var $block = $('#wrap .block'); 
var index = 0; 
 
var interval = setInterval(function(){ 
  if( index == $block.length ) clearInterval( interval ); 
   
  // Основной код. 
  // Текущий блок: $block.eq(index) 
   
  $block.eq(index).text( index ).css('background-color', '#999'); 
   
  index++ // В конце каждого вызова, индекс увелчивается на 1. 
}, 3000);

#wrap { display: flex; } 
 
.block { 
  width: 50px; 
  height: 50px; 
  margin: 5px; 
  background-color: orange; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div id="wrap"> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
</div>

Обращаю внимание, что два варианта выше срабатывают раз в 3 секунды, а не ровно через 3 секунды после обработки предыдущего элемента. Если там какой-то лютый длинно-выполняемый код, будет правильнее вызывать следуюущую только после выполнения предыдущей. Для этого можно создать функцию, которая в конце выполнения будет вызывать саму себя через 3 секунды:

var $block = $('#wrap .block'); 
var i = 0; 
 
recursiveTimeout(); 
 
function recursiveTimeout(){ 
  if( i == 5 ) { return; } 
   
  $block.eq(i).text( i ).css('background-color', '#999');   
  // Здесь может произойти всё что угодно. 
  // Следующий круг не начнется, пока этот не закончится. 
 
  i++; 
  setTimeout( recursiveTimeout, 3000 ); 
}

#wrap { display: flex; } 
 
.block { 
  width: 50px; 
  height: 50px; 
  margin: 5px; 
  background-color: orange; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div id="wrap"> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
</div>

P.s. Как сделать только на чистом js (с) Leks

let block = document.querySelectorAll('#wrap .block'); 
 
for( let i = 0; i < block.length; i++ ){ 
  setTimeout(function(){ 
    block[i].style.backgroundColor = '#999'; 
    block[i].textContent = i; 
  }, 1500 * i); 
}

#wrap { display: flex; } 
 
.block { 
  width: 50px; 
  height: 50px; 
  margin: 5px; 
  background-color: orange; 
}

<div id="wrap"> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
</div>