Question

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

视口宽度超过1250像素
用户位于页面底部
用户调整浏览器的大小以使其更宽广

我的代码就是这个......

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

除了Felix Kling的回答：

对于页面的未来开发，将事件命名为$（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;
    }
  };
});

触发jQuery只运行一次

3 个答案: