スクロールによるページング処理に関して

参考: http://yurubu.org/jquery-autoload/513

んまぁTwitterとかであるスクロールでコンテンツの末尾に到達すると次のページのコンテンツを出してくれる仕組み的なの。参考サイトを見ればどうやって実現すれば良いのかは分かるので書く必要性無いと思うのですが一応メモ

(function($) {
  var padding = 30;
  var loading = false;
  var page = 1;

  var fn = function(done) {
    setTimeout(function() {
      try {
        // 3ページ以上ならErrorをスローするように
        if (page <= 3) {
          for (var i = (page - 1) * 100; i < page * 100;i++) {
            $("#entries").append($("<div>").text("hoge" + i));
            console.debug(i);
          }
          page++;
          done();
        } else {
          throw new Error();
        }
      } catch(e) {
        // エラー起きてもdoneは発生させる。スクロールイベントもunbindしておく
        done();
        $(window).unbind("scroll");

        throw e;
      }
    }, 3000);
  };

  var content = $("#entries");

  $(window).scroll(function(e) {
    console.info("scroll");
    var bottom        = content.offset().top + content.height();
    var scrollPos     = $(window).height() + $(window).scrollTop();

    if (!loading && bottom - scrollPos < padding) {
      loading = true;
      fn(function() { loading = false; });
    }
  });
})(jQuery);

っていう感じでスクロールイベントを利用してチェックする。その際にsetTimeout等で処理されるような場合とかだと簡易的なロックをしておかないと多重に発生してしまうので

コメントにも書いてるけど、エラー起きてもdoneをしないと簡易的なロックとして使ってるloading変数がfalseにならない。んまぁそういうところはPromise(jQueryだと$.Deferred?)辺りを使ってエラー起きた場合にはrejectするなりでイベントをキャッチ出来るはずなのでそういう所でやれば良いんじゃないかなと。あとエラー起きたらスクロールイベントをunbindしといた方が良いかと

という感じっすかね。んまぁ色々そういう所をフォローしてくれるライブラリなりぐぐったらあるはずだし(jscrollとか)、別に外部なライブラリでも良いっていうならそういうの使った方が良いかも

※$(window).heightとか<!DOCTYPE html>みたいに指定されてない場合正しい値が取得できないとかあった気がする