JQueryはマウスを複数回スライドさせ、応答イベントを1回だけトリガーする

通常、マウスホイールイベントを設定すると、1回のスクロールで1回のレスポンスイベントに対応します.しかし、ユーザーの習慣によれば、ユーザーがマウスホイールを1回スライドさせる動作では、実際にマウスホイールが何度もスクロールされている可能性がある(一般的には、ユーザーが一度もスライドホイールをスライドさせない).これにより、実際には複数回のローラ応答イベントがトリガーされ、理想的には達成できず、ユーザは1回のローラをスライドさせ、1つの動作の効果しか生じず、ユーザ体験に影響を与える.
この問題を解決するために、応答イベントのトリガ条件を設定できます.
(1)ローラ応答イベントをトリガするか否かの条件としてboolean型の変数を設定する.初期値はtrueです.

var doScroll = true;

(2)マウスリスニングイベントを設定し、doScrollがtrueの場合、マウスホイールイベントに応答する.
(3)マウスホイールイベントに応答するときにdoScrollをfalseに設定することで、今回の応答中にマウススクロールイベントがどれだけ発生しても応答しないことを保証することができる.
(4)今回のマウスホイール応答イベントが終了するとdoScrollをtrueに再設定して次のホイールイベントに応答する.

(function(){
	var oDiv = document.getElementById('fullpage');

	function onMouseWheel(ev) {/*          ，      */
		var ev = ev || window.event;
		var down = true; //       ，       ，      
			down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
		if(doScroll){
			if(down){
			if(page_index!=6){
				doScroll = false;
				page_index++;
				$('#full-page').animate({top:-page_index*screen_height},speed,function() {
                doScroll = true;
            });
			}
			}else{
				if(page_index!=0){
					doScroll = false;
					page_index--;
					$('#full-page').animate({top:-page_index*screen_height},speed,function() {
                doScroll = true;
            });
				}
			}
			if(ev.preventDefault){/*FF   Chrome*/
				ev.preventDefault();//       
			}
		}
		
		return false;
	}
	addEvent(oDiv,'mousewheel',onMouseWheel);
	addEvent(oDiv,'DOMMouseScroll',onMouseWheel);

})();

 
考え方は大体このようにして、具体的なコードと使用方法は私のもう一つの全画面スクロールに関する文章を参考にすることができます.組み合わせてみると、より効果的です.