jQuery - вызов функции из другой функции после 3-секундной задержки

Question

Я пытаюсь запустить быструю анимацию прокрутки, однако я не могу получить желаемый эффект, чтобы повторить, когда это необходимо. У меня есть маленький мультфильм парень появляется на моем сайте, когда документ будет готов:

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. 

     } 
    }); 
}); 

И тогда мне придется избавиться от него снова, если свитков пользователя снова. Таким образом, желаемый эффект заключается в том, что мультфильм появляется, когда страница загружается, а затем, если пользователь прокручивает ее, исчезает не менее трех секунд, и задержка получает сброс, так что спрайт отсутствует при прокрутке пользователя. Когда пользователь закончит прокрутку, спрайт должен снова появиться. Звучит отвратительно, я знаю, но это очень важно для проекта, над которым я работаю. Любые идеи о том, как я могу это сделать? Как всегда, любая предлагаемая помощь очень ценится.

Answer 1

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