Javascript jQuery在文档就绪时运行，然后在窗口加载时再次运行

我在屏幕顶部和部分下方的一些文本上有一个动画。要运行动画，我让它添加一个类

如果我让它在文档准备好时添加类，那么页面顶部的动画会立即运行，但页面下方的动画也会立即运行（因此我们不知道是否会发生）

如果我让它在scroll上添加类，那么您需要稍微滚动页面顶部的动画才能运行

所以，我有下面的代码，它按照我所希望的方式工作。我的问题是，有没有一种方法可以将这两者结合起来？这似乎很重复

$(document).ready(function() {
  $('.animateText').each(function(){
  var imagePos = $(this).offset().top;
  var topOfWindow = $(window).scrollTop();
  if (imagePos < topOfWindow+400) {
    $(this).addClass("slide-text");
  }
});  
});
  
$(window).scroll(function() {
  $('.animateText').each(function(){
   var imagePos = $(this).offset().top;
   var topOfWindow = $(window).scrollTop();
   if (imagePos < topOfWindow+400) {
      $(this).addClass("slide-text");
   }
  });
});

$（文档）.ready（函数（）{
$（'.animateText'）。每个（函数（）{
var imagePos=$（this）.offset（）.top；
var topOfWindow=$（window.scrollTop（）；
if（图像位置

我尝试过使用这个，但它就像我刚刚使用的窗口滚动一样

$(document).ready(function() {  
   $(window).scroll(function() {
      $('.animateText').each(function(){
         var imagePos = $(this).offset().top;
         var topOfWindow = $(window).scrollTop();
         if (imagePos < topOfWindow+400) {
            $(this).addClass("slide-text");
         }
      });
   });
 });

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
$（'.animateText'）。每个（函数（）{
var imagePos=$（this）.offset（）.top；
var topOfWindow=$（window.scrollTop（）；
if（图像位置

您可以将逻辑封装在函数中，这样在更新源代码时，您只需触摸函数，而不需要触摸两个单独的事件^^^^^^^拥有函数的主要原因之一是因为它们是可重用的。我想我有以下几点，但您可以提供一个示例吗？您可以将逻辑封装在函数中，以便当更新源代码时，您只需要接触函数，而不需要接触两个单独的事件^^^^^^^拥有函数的主要原因之一是因为它们是可重用的。我想我有以下几点，但您能提供一个示例吗？