jquery - jQuery 関数を 1 回だけトリガーする

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

Felix Klingの答えに加えて：

ページの将来の開発では、$(window) のイベントに名前空間を設定し、それらのイベントのみを無効にすることが賢明な場合があります。そのため、$(window) のスクロールおよびサイズ変更イベントの他の機能 (存在する場合) は取得されません。無効：

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

無効にするには:

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

Answer 3

この関数は、オプションの遅延を使用して、何かを 1 回起動するために使用できます。

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;
    }
  };
});