Question

如果点击按钮，你知道如何用动画gif实现javascript延迟吗？我有按钮点击功能，但我想用gif添加2秒的延迟。这是我的工作JavaScript，没有延迟。谢谢。

$(function() {
    $('#myButton').click(function () {
        $('#myFrame').attr('src', '/Video/Upload.aspx/');
        $('#myFrame').attr('width', '500');
        $('#myFrame').attr('height', '200');
        $('#vid').hide();
        $('#vid2').show();
        $('#myFrame').show();
    });
});

我尝试了这个，但它没有工作：

$(function openVideo() {
    $('#myButton').click(function () {
        $('#myFrame').attr('src', '/Video/Upload.aspx/');
        $('#myFrame').attr('width', '500');
        $('#myFrame').attr('height', '200');
        $('#vid').hide();
        $('#vid2').show();
        $('#myFrame').show();
    });
});
setTimeout(openVideo, 2000);

Answer 1

使用javascript setTimeout function：

function functionName() {
    // do stuff.
}

setTimeout(functionName, 2000);

或者像这样：

setTimeout(function() {
    // do stuff.
}, 2000);

因此，在您的示例中，它可能如下所示：

$(function openVideo() {
    $('#myButton').click(function () {
        var delay = setTimeout(function() {
            $('#myFrame').attr('src', '/Video/Upload.aspx/');
            $('#myFrame').attr('width', '500');
            $('#myFrame').attr('height', '200');
            $('#vid').hide();
            $('#vid2').show();
            $('#myFrame').show();
        }, 2000);
    });
});

Demo

Answer 2

使用您首选的方法展示GIF（appendChild，$.append()，innerHTML ...）

然后使用setTimeout(function() {/* do stuff here */}, 2000)实现2秒延迟。

但是，两秒钟很长一段时间。如果没有很好的理由，任何超过0.1秒的延迟通常被认为是不可接受的。

javascript延迟和显示gif

2 个答案:

Demo