javascript - 使用 setTimeout 将弹出窗口延迟 20 秒

Question

我有这条线

$(document).on('ready', contentLockerShow);

该行将在页面加载时弹出一个名为 contentLockerWrapper 的 div，我只想将弹出窗口延迟 20 秒，所以我更改了

$(document).on('ready', contentLockerShow);

和

设置超时（contentLockerShow，20000）；

但是 contentLockerBackground 在包装器之前弹出，并且屏幕在弹出窗口出现之前被锁定。

这是功能

function contentLockerShow(){
        contentLockerBackground.animate({'opacity':'.6'}, 500);
        contentLockerWrapper.fadeIn(500);    
        if(contentLockerCompleted == false){
            contentLockerCompleted = true;
            console.log(contentLockerCompleted);    
        }

Answer 1

我最初误解了你的问题。在 jQuery 中，您可以告诉一个动画在另一个动画完成之前不要开始。现在，您可以同时加载背景和包装器都需要半秒时间。尝试这个：

function contentLockerShow(){
        contentLockerWrapper.fadeIn(500, function()
            contentLockerBackground.animate({'opacity':'.6'}, 500);
        );    
        if(contentLockerCompleted == false){
            contentLockerCompleted = true;
            console.log(contentLockerCompleted);    
        }

同样，如果您希望窗口在后台加载完成之前等待锁定，您可以像这样进一步修改它：

function contentLockerShow(){
        contentLockerWrapper.fadeIn(500, function()
            contentLockerBackground.animate({'opacity':'.6'}, 500, function() 
                 if(contentLockerCompleted == false){
                      contentLockerCompleted = true;
                      console.log(contentLockerCompleted);    
                 }
            );
        );