javascript - 如何在 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);
    }
});

我该如何解决？我正在解决这个问题 +2 小时

Answer 1

问题是你不能在 for 循环中使用 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);
});

Answer 2

$('#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);});
    }
});