jquery - 只触发一次 jQuery 函数

Question

我有以下代码，仅在满足以下条件后才会在控制台日志中显示一条消息...

1. 视口宽度大于 1250px
2. 用户位于页面底部附近
3. 用户调整浏览器的大小以使其更宽

我的代码是这样的...

function checkSize(){
      if($(window).width() > 1250 && $(window).scrollTop() + $(window).height() > $(document).height() - 700) {
        console.log('hello');
      }
    }

    checkSize();
    $(window).scroll(checkSize);
    $(window).resize(checkSize);

你可以在这里看到一个演示...... http://codepen.io/anon/pen/zAxHb

问题在于，当您上下滚动并调整大小几次时，它会触发多次。我只希望它开火一次，然后一直存在。

有什么办法可以做到这一点？

Answer 1

似乎您可以在满足条件后简单地取消绑定事件处理程序：

function checkSize(){
  if($(window).width() > 1250 && $(window).scrollTop() + $(window).height() > $(document).height() - 700) {
    console.log('hello');
    $(window).off('scroll resize', checkSize);
  }
}

$(window).on('scroll resize', checkSize);
checkSize();

Answer 2

除了菲利克斯克林的回答：

对于页面的未来开发，明智的做法是在 $(window) 中为事件命名，然后仅禁用这些事件，这样 $(window) 滚动和调整大小事件的其他功能（如果存在）将不会得到禁用：

$(window).on('scroll.sizeChecker resize.sizeChecker', checkSize);

并禁用：

$(window).off('.sizeChecker');

Answer 3

这个函数可以用来触发一次，带有可选的延迟。

var executeOnce = (function (fn, delay) {
  var executed = false;
  return function (/* args */) {
    var args = arguments;
    if (!executed) {
      setTimeout(function () {
        fn.apply(null, args); // preserve arguments
      }, delay);
      executed = true;
    }
  };
});