javascript - 如何使用 JS 或 jQuery 添加睡眠或等待 JS？

Question

如何从此函数 ShowSC() 添加睡眠

function ShowSC(){
 $("#SC").html('LOADING');
 //adding the sleep 1 second
 $("#SC").html('<img src="secure/captcha/securimage_show.php" class="img_middle" />');
}

提前谢谢！

抱歉，我无法从其他问题中找到解决方案，所以我只是在这里开始一个问题。

Answer 1

您可以使用setTimeout，它在等待指定的毫秒数后执行一次函数

function ShowSC(){
     $("#SC").html('LOADING');

     //adding the sleep 1 second
     setTimeout(function(){
        $("#SC").html('<img src="secure/captcha/securimage_show.php" class="img_middle" />');
     }, 1000);
}

这1000是以毫秒为单位

Answer 2

jQuery Way™ 是使用delay和queue：

$('#SC')
    .html('LOADING')
    .delay(1000)
    .queue(function (n) {
        $(this).html('<img src="secure/captcha/securimage_show.php" class="img_middle" />');
        n();
    });

它有助于维护可链接的代码，这些代码往往更具可读性。可读的代码更容易维护和扩展。

普通的 JavaScript 方法是使用回调setTimeout：

$('#SC').html('LOADING');
setTimeout(function () {
    $('#SC').html('<img src="secure/captcha/securimage_show.php" class="img_middle" />');
}, 1000);

setTimeout在调用中链接调用setTimeout可能会以回调箭头代码结束，所以我通常建议使用队列，即使你不使用 jQuery。你想利用某种排队。

_{以下示例使用了Queue我编写的一个类：}

(function () {
    var sc,
        q;
    q = new Queue();
    sc = document.getElementById('SC');
    sc.innerHTML = 'LOADING';
    q.queue(function (n) {
        setTimeout(n, 1000);
    },function (n) {
        sc.innerHTML = '<img src="secure/captcha/securimage_show.php" class="img_middle" />';
        n();
    });
}());