jquery, mouse over, delay 처리하기

제이쿼리, 마우스 오버 시, 지연 후 실행 하기

마우스 오버 시 특정 내역을 실행 할 경우, setTimeout 을 이용해서 딜레이 후 청리하는 방법 안내 드립니다.

간단한 방법인데 잘 모르는 경우가 많아서 샘플 코드 올려 드립니다.

 

주니어 개발자님들에게 도움이 되었으면 합니다. 

let delay = 1000;
let setTimeoutConst;

$(document).on("mouseenter", "#target-image", function () {
    let that = this;

    setTimeoutConst = setTimeout(function () {
        //do something
    }, delay);
});

$(document).on("mouseleave", "#target-image", function () {
    clearTimeout(setTimeoutConst);
});

//mouseenter, mouseleave 같이 묶어서 사용할 수 있지만 
//종종 처리 안되는 경우가 있으니 가능하면 분리해서 사용하자