如何将嵌套函数的参数传递给主函数参数？

看起来你是想让滚动触发动画的逻辑更灵活，能把动画目标、动画类型这些参数从嵌套函数传递到外层主函数层面，对吧？我来帮你重构代码，让参数传递更清晰，同时提升逻辑的复用性。

核心思路是把嵌套的动画函数独立出来，让主函数接收配置参数，再将这些参数传递给动画函数，下面是两种可行的方案：

方案1：基础版——主函数接收统一配置参数 #

先把slideAnimate改成独立的可复用函数，再创建一个接收参数的主函数处理滚动逻辑，这样就能把主函数的参数传递给动画函数：

// 独立的动画函数，接收目标元素/选择器、动画方法（默认slideInLeft）
function slideAnimate(targetElement, animationMethod = "slideInLeft") {
  // 兼容选择器字符串和jQuery对象两种传入方式
  const $element = typeof targetElement === 'string' ? $(targetElement) : targetElement;
  $element.addClass(animationMethod);
}

// 主函数：接收目标元素选择器、触发偏移量、默认动画类型
function initScrollAnimation(targetSelector, triggerOffset = 591, defaultAnimation = "slideInLeft") {
  $(window).scroll(function() {
    $(targetSelector).each(function() {
      const imagePos = $(this).offset().top;
      const topOfWindow = $(window).scrollTop();
      
      // 新增判断：避免重复添加动画类（可选但推荐，防止滚动时多次触发）
      if (imagePos < topOfWindow + triggerOffset && !$(this).hasClass(defaultAnimation)) {
        // 将主函数的参数传递给动画函数
        slideAnimate($(this), defaultAnimation);
      }
    });
  });
}

// 调用主函数时传入你的定制参数
initScrollAnimation('.dev-courses__item', 591, 'slideInLeft');

方案2：扩展版——支持每个元素自定义动画 #

如果想给不同的.dev-courses__item设置不同的动画，可以利用HTML的data-*属性传递参数，主函数读取后再传给动画函数：

HTML部分（给元素加自定义动画标记）： #

<div class="dev-courses__item" data-animation="slideInLeft"></div>
<div class="dev-courses__item" data-animation="slideInRight"></div>

JS部分： #

function slideAnimate(targetElement, animationMethod) {
  const $element = typeof targetElement === 'string' ? $(targetElement) : targetElement;
  $element.addClass(animationMethod);
}

function initScrollAnimation(targetSelector, triggerOffset = 591, fallbackAnimation = "slideInLeft") {
  $(window).scroll(function() {
    $(targetSelector).each(function() {
      const imagePos = $(this).offset().top;
      const topOfWindow = $(window).scrollTop();
      // 读取元素上的自定义动画参数，没有则用默认值
      const customAnimation = $(this).data('animation') || fallbackAnimation;
      
      if (imagePos < topOfWindow + triggerOffset && !$(this).hasClass(customAnimation)) {
        // 将读取到的自定义参数传递给动画函数
        slideAnimate($(this), customAnimation);
      }
    });
  });
}

// 调用时只需传目标选择器，其他参数可选
initScrollAnimation('.dev-courses__item');

这样修改后，主函数的参数可以灵活控制动画的触发条件、目标元素和动画类型，嵌套/独立函数也能拿到这些参数执行对应逻辑，同时代码的复用性也大大提升了。

内容的提问来源于stack exchange，提问作者deweius