JS 떨 림 방지 절 류 함수 의 실현 과 사용 장면
개념:함수 떨 림 방지(debounce)는 트리거 이벤트 후 n 초 내 함수 에서 한 번 만 실행 할 수 있 으 며,트리거 이벤트 후 n 초 안에 사건 이 발생 하면 함수 지연 실행 시간 을 다시 계산 합 니 다.
1.왜 함수 떨 림 방지 가 필요 합 니까?
전단 개발 과정 에서 흔히 볼 수 있 는 사건 이 있 습 니 다.예 를 들 어 onresize,scroll,mousemove,mousehover 등 은 자주 촉발(짧 은 시간 에 여러 번 촉발)되 고 제한 을 하지 않 으 면 1 초 에 몇 십 번,수백 번 을 실행 할 수 있 습 니 다.만약 에 이런 함수 내부 에서 다른 함 수 를 실행 하면특히 DOM 을 조작 하 는 함수(브 라 우 저 에서 DOM 을 조작 하 는 것 은 성능 을 소모 하 는 것)를 실행 하면 컴퓨터 자원 을 낭비 할 뿐만 아니 라 프로그램 운행 속 도 를 낮 출 뿐만 아니 라 브 라 우 저 카드 가 죽 고 붕 괴 될 수도 있다.
2.함수 떨 림 방지 요점
함수 떨 림 방지 의 요점 은 setTimeout 이 보조 적 으로 실현 되 고 실행 지연 에 필요 한 코드 가 필요 합 니 다.만약 방법 이 여러 번 촉발 된다 면,지난번 에 기 록 된 지연 실행 코드 를 clearTimeout 으로 지우 고 다시 시간 을 잽 니 다.시간 을 재 는 동안 이벤트 가 다시 트리거 되 지 않 으 면 지연 시간 이 끝나 면 목표 코드 를 실행 합 니 다.
3.함수 떨 림 방지 의 실현
//HTML
<div>
：<input type="text" id="myinput">
</div>
//JS
function debounce(fun,wait=1500){//ES6 wait=1500 ， wait 1500
let timeout = null
return function(){
if(timeout){//
clearTimeout(timeout)
}
timeout=setTimeout(function(){
fun()
},wait)
}
}
function testUname(){
console.log(" ！")
}
document.getElementById('myinput').addEventListener('input',debounce(testUname,1000))
위의 코드 는 떨 림 방지 함수 의 간단 한 운용 입 니 다.매번 입력 간격 이 1 초 이상 이면 영원히'인쇄 입력 끝!'을 치지 않 습 니 다.당신 이 입력 을 멈 출 때 까지,이것 은 매번 의 입력 이 지난번 의 타 이 머 를 지우 기 때 문 입 니 다.
여기 보면 끝 인 줄 알 아?서 두 르 지 말고 계속 봅 시다.
//HTML
<div>
：<input type="text" id="myinput">
</div>
//JS
function debounce(fun,wait=1500){
let timeout = null
return function(){
console.log(this)//<input id="myinput" type="text">
console.log(arguments)//Arguments { 0: input, … }
if(timeout){//
clearTimeout(timeout)
}
timeout=setTimeout(function(){
console.log(this)//Window
console.log(arguments)//Arguments { … }
fun()
},wait)
}
}
function testUname(){
console.log(" ！")
}
document.getElementById('myinput').addEventListener('input',debounce(testUname,1000))
특별한 지향 이 없 으 면 setInterval 과 setTimeout 의 반전 함수 에서 this 의 지향 은 모두 window 입 니 다.JS 의 타이머 방법 이 window 에 정의 되 어 있 기 때문이다.이것 은 분명히 우리 가 원 하 는 것 이 아니다.왜냐하면 우리 가 감청 한 것 은 input 입력 상자 이기 때문에 우 리 는 타이머 안의 this 가 input 를 가리 키 기 를 바란다.
그럼 this 지향 을 바 꿀 수 있 는 방법 이 있 나 요?
간단 한 방법 은 타이머 바깥쪽 함수 의 this 와 arguments 를 매개 변수 로 저장 할 수 있다 는 것 이다.그리고 apply 를 통 해 타이머 가 실행 할 함수 fun 의 방향 을 바 꿉 니 다.
//JS
function debounce(fun,wait=1500){
let timeout = null
return function(){
let _this = this
let arg = arguments
if(timeout){//
clearTimeout(timeout)
}
timeout=setTimeout(function(){
console.log(_this)//<input id="myinput" type="text">
console.log(arg)//Arguments { 0: input, … }
fun.apply(_this,arg)
},wait)
}
}
물론 ES6 의 화살표 함수 의 새로운 기능 을 사용 할 수 있 습 니 다.화살표 함수 의 this 는 항상 함수 가 정 의 될 때의 this 를 가리 키 며 실행 할 때 가 아 닙 니 다.화살표 함 수 는 이 말 을 기억 해 야 합 니 다."화살표 함수 에 this 바 인 딩 이 없습니다.역할 도 메 인 체인 을 찾 아 값 을 결정 해 야 합 니 다.화살표 함수 가 비 화살표 함수 에 포함 되 어 있 으 면 this 바 인 딩 은 최근 화살표 함수 가 아 닌 this 입 니 다.그렇지 않 으 면 this 는 undefined 입 니 다."
그래서 이렇게 쓸 수도 있다.
//JS
function debounce(fun,wait=1500){
let timeout = null
return function(){
if(timeout){//
clearTimeout(timeout)
}
timeout=setTimeout(()=>{
console.log(this)//<input id="myinput" type="text">
console.log(arguments)//Arguments { 0: input, … }
fun.apply(this,arguments)
},wait)
}
}
4.함수 떨 림 방지 사용 장면
함수 떨 림 방지 는 일반적으로 어떤 상황 에서 사용 합 니까?일반적으로 연속 적 인 사건 은 한 번 의 반전 만 촉발 하 는 장소 에 쓰 인 다.구체 적 으로 다음 과 같다.
개념:한 함수 가 일정 시간 에 한 번 만 실 행 될 수 있 도록 제한 합 니 다.
밤 을 들 고 기차 나 지하철 을 타고 안전 검 사 를 통과 할 때 일정 시간(예 를 들 어 10 초)내 에 한 명의 승객 만 안전 검사 입 구 를 통과 하여 안전 검사 인원 이 안전 검 사 를 완성 하도록 허락 한다.상례 에서 10 초 마다 한 명의 승객 만 통과 할 수 있다.분석 을 통 해 알 수 있 듯 이'함수 절 류'의 요점 은 일정한 시간 안에 한 동작 을 한 번 만 실행 하도록 제한 하 는 것 이다.
1.함수 절 류 의 요점
주로 사 고 를 실현 하 는 것 은 setTimeout 타 이 머 를 통 해 지연 시간 을 설정 하고 첫 번 째 호출 시 타 이 머 를 만 들 고 변 수 를 설정 한 다음 에 타 이 머 를 이 변수 에 할당 한 다음 에 실행 해 야 할 함 수 를 기록 하 는 것 입 니 다.이 함 수 를 두 번 째 로 실행 할 때 변수 가 true 인지 아 닌 지 를 판단 하고 되 돌려 줍 니 다.첫 번 째 타이머 가 함 수 를 실행 하면 마지막 으로 변 수 를 false 로 설정 합 니 다.그러면 다음 에 변 수 를 판단 할 때 false 이 고 함수 가 순서대로 실 행 됩 니 다.일정한 시간 내 에 여러 함수 의 요청 이 마지막 호출 만 실 행 될 수 있 도록 하 는 것 이 목적 이다.
이렇게 보니까 좀 모 르 겠 죠?코드 를 봅 시다.
2.함수 절 류 의 실현
//JS
function debounce(fun,wait=1000){//
let timer = null;//
return function(){
if(!timer){// timer null
timer = setTimeout(function(){//
fun()//
timer = null// false， timer = null ，1、 ，2、
})
}
}
}
function testUname(){
console.log(Math.random())
}
document.getElementById('myinput').addEventListener('input',debounce(testUname))
마찬가지 로 절 류 함수 도 this 와 arguments 문 제 를 해결 해 야 합 니 다.개선 후 다음 과 같 습 니 다.
//
function debounce(fun,wait=1000){
let timer = null
return function(){
if(!timer){
timer = setTimeout(()=>{
fun.apply(this,arguments)
timer = null
},wait)
}
}
}
//
function debounce(fun,wait=1000){
let timer = null
return function(){
let _this = this
let arg = arguments
if(!timer){
timer = setTimeout(function(){
fun.apply(_this,arg)
timer = null
},wait)
}
}
}
지금까지 여러분 들 은 함수 절 류 에 대해 비교적 상세 하 게 알 아야 한다 고 믿 습 니 다.그 함수 절 류 는 보통 어떤 상황 에서 사용 합 니까?
JS 떨 림 방지 절 류 함수 의 실현 과 사용 장면 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 JS 떨 림 방지 절 류 함수 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
좋은 웹페이지 즐겨찾기
