如何将延迟时间添加到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); 
});