jqueryの$(window).scroll(function () {}でスクロールするたびに実行されてしまいます。

Question

$(window).scroll(function () {
		var s = $(this).scrollTop();
		var m = 20500;
		if(s > m) {
			var num = 0;
			var tgt = 35;
			var speed = 15;
			setInterval(function(){
			if(num <= tgt){
				$('.counter05').html(num);
				num++;
			}
			},speed);
		} 
	});

一定のところまできたら数字がカウントアップするようなソースを書いたのですが、
スクロールするたびに実行されてしまいます。。
こちらどのような処理をすればよいのでしょうか。。
ご教授よろしくお願いいたします。

Answer 1

複数の場合を載せます。
これはかなり単純に考えたので、希望通りの動作をするかかなり怪しいです。ですので、参考程度に留めておいてください。

var timers = [];   //setIntervalを設定した個数
var timersMax = 2; //ここで数字をカウントアップする個数を決定
//カウントアップする関数を定義
var countUp = function(tgt, speed, selector){
    var num = 0;
    timers[timers.length] = setInterval(function(){
        if(num <= tgt){
            $(selector).html(num);
            num++;
        }
    }, speed);
};

$(function(){
    $(window).on("scroll", function(){
        var s = $(this).scrollTop();
        var m = 2800;
        if(s > m){
            if(timers.length < 1){
                countUp(1, 15, '.counter01');
            }
        }
        m = 5800;
        if(s > m){
            if(timers.length < 2){
                countUp(3, 15, '.counter02');
            }
        }
        //ここでスクロールイベントを解除
        if(timers.length >= timersMax){
            $(window).off("scroll");
        }
    });
});

Comments

[orange0190]

これを考えているうちにokayu3さんがより良い方法を載せていましたね・・・
そちらを参考にしてください。

[hiro421]

ありがとうございます！
こちらも質問不足で申し訳ありませんでした。。
なんとお礼を申し上げたらよいかわかりません。。
今後ともよろしくお願いいたします！！

Answer 2

複数設置する場合は、offするんじゃなくて、1個終わったら 終わったフラグを立てておく、
ということになりますね。たとえば

//イベント発火位置、対象class、ターゲット、処理済みフラグを管理します。
var set_scroll_counter = [{
    loc: 2800,
    cls_cnt: '.counter01',
    target: 1,
    done: 0
}, {
    loc: 5800,
    cls_cnt: '.counter02',
    target: 3,
    done: 0
}, {
    loc: 20500,
    cls_cnt: '.counter05',
    target: 35,
    done: 0
}];


$(window).on("scroll", function () {
    var i, ilen, one, num, m, found = false,
        speed = 15,
        s = $(this).scrollTop(),
        arr = set_scroll_counter;
    //未処理のデータセットを探します。
    for (i = 0, ilen = arr.length; i < ilen; i++) {
        one = arr[i];
        if (one.done === 0) {
            m = one.loc;
            found = true;
            break;
        }
    }
    //未処理セットがあり、かつ発火地点に到達していたら、カウントアップ開始。
    if (found && (s > m)) {
        num = 0;
        setInterval(function () {
            if (num <= one.target) {
                $(one.cls_cnt).html(num);
                num++;
            }
        }, speed);
        one.done = 1;//処理済みフラグを立てる。
    }
});

と、こんな風に。
さらに増やすには、データセットを追加するだけでOKですね。
わかりやすく データセットを探すロジックと、イベント発火ロジックを
分けて書きました。(jsbeautifier + jsLint 処理済み)

Comments

[hiro421]

ありがとうございます！
希望通りの動きになりました！
とても参考になりました！

[okayu3]

よかったです。データと処理を分けることを意識してくださいね。
そうすると必ずいいコードになります。

Answer 3

ある程度スクロールしたら数字が自動で増えていくという考えでよろしいですか？
でしたら、以下のようにしたらどうでしょうか?

$(window).on("scroll", function(){
    var s = $(this).scrollTop();
    var m = 20500;
    if(s > m) {
        var num = 0;
        var tgt = 35;
        var speed = 15;
        setInterval(function(){
            if(num <= tgt){
                $('.counter05').html(num);
                num++;
            }
        },speed);
        $(window).off("scroll");
    } 
});

Comments

[hiro421]

ありがとうございます！
希望の動きになったのですが、これを複数設置する場合はどのように記述すればよいのでしょうか。。
質問不足で申し訳ありません。
20500とさせていただいてるのですが、
この数値が複数あってそれぞれ違う数字がカウントアップさせるようにしたいのです。

$(window).on("scroll", function(){
var s = $(this).scrollTop();
var m = 2800;
if(s > m) {
var num = 0;
var tgt = 1;
var speed = 15;
setInterval(function(){
if(num <= tgt){
$('.counter01').html(num);
num++;
}
},speed);
$(window).off("scroll");
}
});

$(window).on("scroll", function(){
var s = $(this).scrollTop();
var m = 5800;
if(s > m) {
var num = 0;
var tgt = 3;
var speed = 15;
setInterval(function(){
if(num <= tgt){
$('.counter02').html(num);
num++;
}
},speed);
$(window).off("scroll");
}
});