Как добавить время задержки в строку кода на JavaScript

Question

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

$('#image').hover(function(){ 
    var src = ""; 
    var elem = $(this); 
    for (var i=2; i<16; i++) { 
     src = elem.attr('src').split('.'); 
     src[3] = i; 
     src = src.toString(); 
    src = src.split(',').join('.'); 
    elem.attr('src', src); 
    } 
}); 

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

$('#image').hover(function(){ 
    var src = ""; 
    var elem = $(this); 
    for (var i=2; i<16; i++) { 
     src = elem.attr('src').split('.'); 
     src[3] = i; 
     src = src.toString(); 
     src = src.split(',').join('.'); 
     setTimeout(function() { 
      elem.attr('src', src); 
     }, 800); 
    } 
}); 

Как я могу это решить? Я работаю с этой проблемой для + 2h

Answer 1

$('#image').hover(function(){ 
    var src = ""; 
    var elem = $(this); 
    for (var i=2; i<16; i++) { 
     src = elem.attr('src').split('.'); 
     src[3] = i; 
     src = src.toString(); 
     src = src.split(',').join('.'); 

$(elem).delay(800).animate({zoom:1},0,function(){$(this).src(src);}); 
    } 
}); 

Answer 2

Проблема вы не можете использовать SetTimeout внутри для цикла .. Вместо этого использования setInterval ..

$('#image').hover(function() { 
    var src = ""; 
    var elem = $(this); 
    var i = 2; 
    var interval = setInterval(function() { 
     if (i < 16) { 
      src = elem.attr('src').split('.'); 
      src[3] = i; 
      src = src.toString(); 
      src = src.split(',').join('.'); 

      elem.attr('src', src); 
      i++; 
     } else { 
      i = 2; 
      clearInterval(interval); 
     } 
    }, 800); 
});