마우스 휠 중복 과다 제어 막기

2022. 3. 24. 16:32Study/JavaScript

ClearTimeout과 SetTimeout 으로 마우스 휠 중복 과다 제어 막기

 

 var timeout;
 
// 휠이벤트가 발생하면
window.onwheel = function(){
    clearTimeout(timeout);  //이전 휠 이벤트 제거
    timeout = setTimeout(function(){ //다시 휠 이벤트 발생  0.1초후
        // to do
    }, 1000);
};

 

 

// section위에서 마우스 휠을 움직이면
$('section').on("mousewheel DOMMouseScroll", function(event,delta){

    if (delta > 0 && cnt > 0 && wt>1024 && window.matchMedia("(min-width: 1024px)").matches) { //마우스 휠을 올렸을때

        clearTimeout(timer);
        timer = setTimeout(function(){
            console.log(cnt);
            cnt --;
            scrollMove(cnt);
        }, 150);
        return false;

    }else if (delta < 0 && cnt < sectionLen && wt>1024 && window.matchMedia("(min-width: 1024px)").matches) {  //마우스 휠을 내렸을때

        clearTimeout(timer);
        timer = setTimeout(function(){
            console.log(cnt);
            cnt ++;
            scrollMove(cnt);
        }, 150);
        return false;
    }
});

 

 

 

 

'Study > JavaScript' 카테고리의 다른 글

Vue JS  (1) 2022.04.08
Angular JS  (0) 2022.04.06
해상도별 이미지 교체 window resize  (0) 2022.01.11
클릭 시 Video 주소 바꾸기  (0) 2021.12.23
링크 시 매개변수(parameter)파라미터 값 넘기기  (0) 2021.12.21