jQuery-延迟3秒后从另一个函数调用函数

我正在尝试在scroll上运行一个快速动画，但是我无法在必要时获得想要的效果来重复。文档准备好后，我的网站上会出现一个卡通小人物：

Var SpriteVis;

jQuery(document).ready(function tele_in($) {   // function to make sprite appear.
    $("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {
        $("#sprite").css({
           'background-image': 'url(/images/Warp-Sprite.png)',
           'height': '50px',
           'width': '90px',
           'left': '300px',
           'bottom': '80px'
        });
        setTimeout(function () {
            $("#sprite").css({
            'background-image': 'url(/images/test-sprite.png)',
           'height': '120px',
           'width': '96px'
            });
        }, 80);
    });
    SpriteVis = true;
});

上面的代码工作正常，但是我希望卡通人物在滚动时消失，如果用户在3秒钟内没有滚动，我希望卡通人物重新出现。我可以让漫画消失，但我根本无法让它回来。我不确定这是因为我没有正确调用函数，还是在错误的地方调用函数，或者是什么，但我完全被难住了。下面是一个函数，该函数可以删除卡通并将其回调：

jQuery(function ($) {
    $(window).scroll(function () {
        if (SpriteVis == true) {  //if Sprite is present on screen, run the animation sequence to make it disappear.
        $("#sprite").css({
           'background-image': 'url(/images/Warp-Sprite.png)',
           'height': '50px',
           'width': '90px',
           'left': '300px',
           'bottom': '80px'
        });
        setTimeout(function () {
            $("#sprite").css({
           'background-image': 'url(/images/Teleport-Sprite.png)',
           'height': '188px',
           'width': '52px',
           'left': '330px'
            });
            $("#sprite").animate({bottom: '2000px'}, 400, 'linear', function () {
            });
        }), 80;
        SpriteVis = false;
        } else {

        //I need to call the "tele_in" function here after a 3 second delay but I'm not sure how to do that.

        }
    });
});

然后，如果用户再次滚动，我将不得不再次摆脱他。因此，理想的效果是，加载页面时会出现动画，如果用户滚动，动画会消失至少三秒钟，延迟会被重置，因此当用户滚动时，精灵不会出现。当用户完成滚动时，精灵需要重新出现。听起来很讨厌，我知道，但这对我正在进行的项目至关重要。关于我如何做到这一点有什么想法吗？一如既往，我们非常感谢您提供的任何帮助。

您可以使用。每当用户滚动时，请清除超时并再次启动计时器。使用全局变量存储计时器，例如document.showcartonguytimer=setTimeoutfunction。。。然后在滚动功能中：clearTimeoutdocument.ShowCartonGuyTimer；然后再调一次。

// Global Var
var SpriteVis;

// Function to make sprite appear.
function tele_in() {
    $("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {

        $("#sprite").css({
           'background-image': 'url(/images/Warp-Sprite.png)',
           'height': '50px',
           'width': '90px',
           'left': '300px',
           'bottom': '80px'
        });

        setTimeout(function () {
            $("#sprite").css({
                'background-image': 'url(/images/test-sprite.png)',
                'height': '120px',
                'width': '96px'
                });
            }, 80);
        });

        SpriteVis = true;

}

// Setup event listener for on scroll event
$(window).scroll(function () {
    if (SpriteVis == true) {  //if Sprite is present on screen, run the animation sequence to make it disappear.
        $("#sprite").css({
           'background-image': 'url(/images/Warp-Sprite.png)',
           'height': '50px',
           'width': '90px',
           'left': '300px',
           'bottom': '80px'
        });
        setTimeout(function () {
            $("#sprite").css({
           'background-image': 'url(/images/Teleport-Sprite.png)',
           'height': '188px',
           'width': '52px',
           'left': '330px'
            });
            $("#sprite").animate({bottom: '2000px'}, 400, 'linear', function (){});
        }), 80;
        SpriteVis = false;
    } else {
        // Call tele_in() after 3 seconds
        setTimeout(function(){ tele_in(); }, 3000);
    }
});

// Doc Ready
$(document).ready(function() { 
    // Call tele_in()
    tele_in();
});