javascript - javascript延迟并显示gif

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 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);
    });
});

演示

Answer 2

使用您喜欢的方法显示 GIF ( appendChild, $.append(), innerHTML...)

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

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