javascript - 函数内的单个函数不会触发，而其他函数会触发

Question

我的 main.js 有一个奇怪的行为(也许这并不奇怪，我只是犯了一个愚蠢的错误)。
所以我得到了一个函数 $(function(){...}); 以及其中的一些其他函数。查看我的代码:

$(function() {

    // THIS FUNCTION DOES FIRE
    setInterval(function() { 
        var active = $(".active").fadeOut(1000, function() {
            $(this).removeClass('active');
        });
        if (active.next() && active.next().length) {
            active.next().delay(1000).fadeIn(1000, function() {
                $(this).addClass('active');
            });
        } else {
            active.siblings(":first").delay(1000).fadeIn(1000, function() {
                $(this).addClass('active');
            });
        }
    }, 3000);

    // THAT WORKS ASWELL
    var sectionHeight = $(".welcome-page").outerHeight();
    $(".abilities-page").css('height', sectionHeight);
    $(".portfolio-page").css('height', sectionHeight);
    var titleAlign = sectionHeight / 2 - $(".sectiontitle").outerHeight() / 2;
    $(".sectiontitle").css('padding-top', titleAlign);

    $(".logo").addClass('logoVis');
    // ALL OF THAT WORKS UNTIL HERE

    // THIS WHOLE FUNCTION DOES NOT FIRE
    $(function($) {
        $(function() {
            $(window).scroll(function() {
                $('div.section').removeClass('most-visible').mostVisible().addClass('most-visible');
                $(function() {
                    $(window).scroll(function(e) {
                        clearTimeout($.data(this, 'scrollTimer'));
                        $.data(this, 'scrollTimer', setTimeout(function() {
                            var vpHeight = $(window).height();
                            var scrollOffset = (vpHeight - sectionHeight) / 2;
                            $('html, body').animate({
                                scrollTop: $("div.most-visible").offset().top -
                                    scrollOffset
                            }, 500);
                        }, 1000));
                        if ($(window).width() > 900) {
                            if ($(window).scrollTop() >=
                                $(document).height() -
                                $(window).height() - 20 || $(window).scrollTop() <= 20) {
                                $("footer").addClass('footerVis');
                                $(".logo").addClass('logoVis');
                                $('html, body').stop(true);
                            } else {
                                $("footer").removeClass('footerVis');
                                $(".logo").removeClass('logoVis');
                            }
                        } else {
                            $("footer").addClass('footerVis');
                            $(".logo").addClass('logoVis');
                        }
                    });
                });
            });
        });

        function getMostVisible($elements) {
            var $element = $(),
                viewportHeight = $(window).height(),
                max = 0;

            $elements.each(function() {
                var visiblePx = getVisibleHeightPx($(this), viewportHeight);

                if (visiblePx > max) {
                    max = visiblePx;
                    $element = $(this);
                }
            });

            return $element;
        }

        function getVisibleHeightPx($element, viewportHeight) {
            var rect = $element.get(0).getBoundingClientRect(),
                height = rect.bottom - rect.top,
                visible = {
                    top: rect.top >= 0 && rect.top < viewportHeight,
                    bottom: rect.bottom > 0 && rect.bottom < viewportHeight
                },
                visiblePx = 0;

            if (visible.top && visible.bottom) {
                // Whole element is visible
                visiblePx = height;
            } else if (visible.top) {
                visiblePx = viewportHeight - rect.top;
            } else if (visible.bottom) {
                visiblePx = rect.bottom;
            } else if (height > viewportHeight && rect.top < 0) {
                var absTop = Math.abs(rect.top);

                if (absTop < height) {
                    // Part of the element is visible
                    visiblePx = height - absTop;
                }
            }

            return visiblePx;
        }

    });

    // THAT WORKS ASWELL
    $("#item1").animatedModal({
        modalTarget: 'animatedModal1',
        overflow: 'hidden',
        color: 'rgba(255,255,255,0.8);'
    });

});

如您所见，我添加了一些注释来标记，哪些部分有效，哪些无效。它只是一个单一的功能，不起作用。

• 控制台没有给我任何错误。
• 嵌入了最新版本的 jQuery
• 所有其他 JS 文件都能完美运行

要查看我的完整网站或所属的 CSS、HTML 等代码，请访问:

• > tobiasgla.us完整网站
• > tobiasgla.us/main.js获取完整的 JS 文件
• > tobiasgla.us/style.css为 CSS

提前感谢您的帮助!

Answer 1

不确定它是否有帮助，但我发现嵌套窗口滚动事件绑定(bind)存在问题。也许尝试这个版本没有所有额外的 $(functions)() 和没有嵌套的 window.on('scroll')

$(function() {
  var $window = $(window);
  var $footer = $("footer");
  var $logo = $(".logo");

  // THIS FUNCTION DOES FIRE
  setInterval(function() { 
      var active = $(".active").fadeOut(1000, function() {
          $(this).removeClass('active');
      });
      if (active.next() && active.next().length) {
          active.next().delay(1000).fadeIn(1000, function() {
              $(this).addClass('active');
          });
      } else {
          active.siblings(":first").delay(1000).fadeIn(1000, function() {
              $(this).addClass('active');
          });
      }
  }, 3000);

  // THAT WORKS ASWELL
  var sectionHeight = $(".welcome-page").outerHeight();
  $(".abilities-page").css('height', sectionHeight);
  $(".portfolio-page").css('height', sectionHeight);
  var titleAlign = sectionHeight / 2 - 
  $(".sectiontitle").outerHeight() / 2;
  $(".sectiontitle").css('padding-top', titleAlign);

  $logo.addClass('logoVis');
  // ALL OF THAT WORKS UNTIL HERE

  // THIS WHOLE FUNCTION DOES NOT FIRE


  $window.scroll(function() {
      $('div.section').removeClass('most-visible').mostVisible().addClass('most-visible');

      clearTimeout($.data(this, 'scrollTimer'));
      $.data(this, 'scrollTimer', setTimeout(function() {
          var vpHeight = $window.height();
          var scrollOffset = (vpHeight - sectionHeight) / 2;
          $('html, body').animate({
              scrollTop: $("div.most-visible").offset().top -
                  scrollOffset
          }, 500);
      }, 1000));

      if ($window.width() > 900) {
          if ($window.scrollTop() >=
              $(document).height() -
              $window.height() - 20 || $(window).scrollTop() <= 20) {
              $footer.addClass('footerVis');
              $logo.addClass('logoVis');
              $('html, body').stop(true);
          } else {
              $footer.removeClass('footerVis');
              $logo.removeClass('logoVis');
          }
      } else {
          $footer.addClass('footerVis');
          $logo.addClass('logoVis');
      }
  });

  function getMostVisible($elements) {
      var $element = $(),
          viewportHeight = $(window).height(),
          max = 0;

      $elements.each(function() {
          var visiblePx = getVisibleHeightPx($(this), viewportHeight);

          if (visiblePx > max) {
              max = visiblePx;
              $element = $(this);
          }
      });

      return $element;
  }

  function getVisibleHeightPx($element, viewportHeight) {
      var rect = $element.get(0).getBoundingClientRect(),
          height = rect.bottom - rect.top,
          visible = {
              top: rect.top >= 0 && rect.top < viewportHeight,
              bottom: rect.bottom > 0 && rect.bottom < viewportHeight
          },
          visiblePx = 0;

      if (visible.top && visible.bottom) {
          // Whole element is visible
          visiblePx = height;
      } else if (visible.top) {
          visiblePx = viewportHeight - rect.top;
      } else if (visible.bottom) {
          visiblePx = rect.bottom;
      } else if (height > viewportHeight && rect.top < 0) {
          var absTop = Math.abs(rect.top);

          if (absTop < height) {
              // Part of the element is visible
              visiblePx = height - absTop;
          }
      }

      return visiblePx;
  }

  // THAT WORKS ASWELL
  $("#item1").animatedModal({
      modalTarget: 'animatedModal1',
      overflow: 'hidden',
      color: 'rgba(255,255,255,0.8);'
  });
});