如何將延遲時間添加到JavaScript代碼行中

Question

即時通訊嘗試執行一項功能，即當用戶將光標移到圖像上時，它將顯示預覽。所以即時消息發送事件的圖像的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('.'); 
    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裏面一個for循環.. 而不是使用的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); 
});