JS 떨 림 방지 절 류 함수 의 실현 과 사용 장면

1.함수 떨 림 방지 가 무엇 입 니까?
개념:함수 떨 림 방지(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))

떨 림 방지 든 절 류 를 하 든 우 리 는 두 가지 문 제 를 해결 해 야 한다.this 지향 과 arguments.
특별한 지향 이 없 으 면 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.함수 떨 림 방지 사용 장면
함수 떨 림 방지 는 일반적으로 어떤 상황 에서 사용 합 니까?일반적으로 연속 적 인 사건 은 한 번 의 반전 만 촉발 하 는 장소 에 쓰 인 다.구체 적 으로 다음 과 같다.

검색 상자 검색 입력.사용자 가 마지막 으로 입력 하고 요청 을 보 내기 만 하면 됩 니 다.

사용자 이름,핸드폰 번호,메 일 입력 검증;

브 라 우 저 창 크기 가 바 뀌 면 창 조정 이 끝 난 후에 resize 이벤트 의 코드 를 실행 하여 중복 렌 더 링 을 방지 합 니 다.

2.함수 절 류 는 무엇 입 니까?
개념:한 함수 가 일정 시간 에 한 번 만 실 행 될 수 있 도록 제한 합 니 다.
밤 을 들 고 기차 나 지하철 을 타고 안전 검 사 를 통과 할 때 일정 시간(예 를 들 어 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)

            }
        }
}

3.함수 절 류 의 사용 장면
지금까지 여러분 들 은 함수 절 류 에 대해 비교적 상세 하 게 알 아야 한다 고 믿 습 니 다.그 함수 절 류 는 보통 어떤 상황 에서 사용 합 니까?

게 으 른 로드,스크롤 로드,더 많은 로드 또는 스크롤 바 위 치 를 감청 합 니 다.

바 이 두 검색 상자,연상 기능 검색;

고주파 클릭 으로 제출 하 는 것 을 방지 하고 폼 의 중복 제출 을 방지 합 니 다.

총결산
JS 떨 림 방지 절 류 함수 의 실현 과 사용 장면 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 JS 떨 림 방지 절 류 함수 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!