javascript - 传递要在 jQuery 对象上使用的方法

Question

所以我在这里遇到了一个小问题。我有简单的 jQuery 函数来查看给定的元素/元素是否在当前视口中。请参阅下面的代码。

 function checkIfInViewport(element) {
  $(element).each(function() {
    let divPos = $(this).offset().top,
      topOfWindow = $(window).scrollTop();

    if (divPos < topOfWindow + 600) {
      $(this)
        .addClass('animated bounceInLeft')
        .css('opacity', 1);
    }
  });
}

我的问题是如何摆脱对 addClass 和 css 方法的硬编码，而是调用如下函数：

checkIfInViewport(element, {methods I want to use});

所以我不必指定我想对函数本身的元素做什么，我想将我想要它做的事情传递给函数。

谢谢！

标签： javascriptjqueryfunctionobjectarguments

Answer 1

您可以将逻辑提取到函数中，并将其作为参数传递给函数。这通常被称为callback.

function checkIfInViewport(element, callback) {
  $(element).each(function() {
    let divPos = $(this).offset().top,
      topOfWindow = $(window).scrollTop();

    if (divPos < topOfWindow + 600) {
      callback(this);
    }
  });
}

function animateElementAndSetOpacity ( element ) {
  $(element)
    .addClass('animated bounceInLeft')
    .css('opacity', 1);
}

checkIfInViewport( someElement, animateElementAndSetOpacity );