스크롤 이벤트가 여러번 실행되는 것을 방지하는 자바스크립트의 아이디어와 구현

스크롤 이벤트가 여러번 실행되는 것을 방지하는 자바스크립트의 아이디어와 구현_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:16:46

원래의

1079명이 탐색했습니다.

이는 주로 일부 일반적인 웹페이지 특수 효과가 js 구문 분석 중에 서로 다른 기대치와 효과를 갖는 문제를 해결하기 위해 작성되었습니다.

원본 코드:

코드 복사 코드는 다음과 같습니다.

 
 //테스트 코드 
window.onscroll = function(){ 
alert("haha"); 
} 

스크립트 태그에 설치하고 계속 생각해 볼 수 있습니다. 그래서 매우 불편합니다.
마우스 슬라이드 후 이벤트를 한 번만 실행하는 것이 목적입니다. 이 효과는 실제 상황과 분명히 일치하지 않습니다.

//코드 개선--지연기를 추가합니다.
스크롤 이벤트는 연속적인 트리거 이벤트이므로 사용자가 마우스를 슬라이드한 후에 해당 기능이 실행되도록 딜레이를 설정했습니다. 한 번만 실행할 수는 없나요?

코드 복사 코드는 다음과 같습니다.

 
//테스트 코드: 
기능 하하() { 
alert("하하"); 
} 
window.onscroll = function(){ 
setTimeout(하하,500) 
} 

결과 위와 같이 여전히 많은 경고 상자가 나타나는 것을 확인했습니다. 스크롤 이벤트가 대기열처럼 일렬로 정렬되어 순서대로 실행되는 것을 볼 수 있으므로 이 방법은 차단되므로 다른 방법을 찾아보세요.

조건을 통해 이벤트 실행을 제어하는 것이 좋은 방법입니다

코드 복사 코드는 다음과 같습니다

 
function haha(){ 
alert("haha"); 
} 
var tur = true; //조건 생성 
window.onscroll = function(){ 
 if(tur){ setTimeout(haha,500); tur = false; } 
else 
{} 
} 

다행히 코드는 다음과 같은 경우에 한 번 실행됩니다. 마우스 스크롤이 문제입니다. 마우스를 다시 스크롤하면 이벤트가 더 이상 실행되지 않습니다.
조건이 false로 설정되어 후속 이벤트가 절대 실행되지 않기 때문입니다.

조건부 판단과 지연된 실행이 이 문제를 해결할 수 있다는 생각입니다. 이벤트 실행 시작 시 변수가 부활하고 이벤트가 완료된 후 변수가 종료됩니다.

코드 복사 코드는 다음과 같습니다.

 
var tur = 
function; 하하() {alert("하하"); tur = true; } 

window.onscroll = function(){ 
if(tur){ setTimeout(haha,1000); 🎜>} else{ } 
} 