2016-07-20 2 views
0

스크롤을 수신하는 함수가 있지만 여러 번 호출해야합니다. 그리고 이로 인해 이벤트 리스너가 스태킹됩니다. 그래서 다음과 같이 추가하기 전에 하나를 제거하려고 :eventListener를 제거 할 수 없습니다.

watchButton() { 
    console.log('watching button'); 
    const button = document.getElementById('load-more-news'); 
    const fetcher =() => { 
     let windowHeight = document.body.offsetHeight/2; 
     let offset = button.getBoundingClientRect().top; 
     if (offset <= windowHeight) { 
     button.click(); 
     } 
    }; 

    window.removeEventListener('scroll', throttle(fetcher, CONFIG.THROTTLE), true); 
    window.addEventListener('scroll', throttle(fetcher, CONFIG.THROTTLE), true); 
    } 

나는 또한 다른 변수에 throttle 기능을 결합 시도 :

const fetcher =() => { 
    let windowHeight = document.body.offsetHeight/2; 
    let offset = button.getBoundingClientRect().top; 
    if (offset <= windowHeight) { 
    button.click(); 
    } 
}; 

const boundFetcher = throttle(fetcher, CONFIG.THROTTLE); 

window.removeEventListener('scroll', boundFetcher, true); 
window.addEventListener('scroll', boundFetcher, true); 

하지만 크롬에서 이벤트 리스너 탭을 확인할 때, 나는 두가 (이상) 스크롤 리스너가 여기에 초기화됩니다. 어떻게해야합니까?

+0

외부에서 const 변수를 이동

watchButton

에 여러 통화에서 당신의 변수가 일정하지 않습니다 ... 그래서 그것은 제거되지 않습니다. –

+0

['removeEventListener'] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)에는'addEventListener'와 함께 사용 된 원래의 함수 참조가 필요합니다. 그래서'throttle'이 isn 그 다음에는 제거되지 않을 것입니다. –

+0

@PatrickEvans throttle은 이벤트 처리기가 너무 자주 실행되는 것을 방지하는 잘 알려진 함수 데코레이터이며, 대부분의 주요 js 라이브러리에서 밑줄처럼 사용됩니다. 진단 결과가 정확하면 새로운 함수 객체를 반환합니다. –

답변

0

watchButton이 호출 될 때마다 함수 참조를 다시 작성하므로 및 throttle(fetcher,...)watchButton이 호출 될 때마다 달라집니다.

const 당신은 당신이 추가 한 것과 다른 기능을 제거하려는 watchButton 기능

const button = document.getElementById('load-more-news'); 
const fetcher =() => { 
    let windowHeight = document.body.offsetHeight/2; 
    let offset = button.getBoundingClientRect().top; 
    if (offset <= windowHeight) { 
    button.click(); 
    } 
}; 
const throttledFetch = throttle(fetcher, CONFIG.THROTTLE); 

watchButton() { 
    window.removeEventListener('scroll', throttledFetch, true); 
    window.addEventListener('scroll', throttledFetch, true); 
} 
관련 문제