JS 흔들림 방지 및 조절

개념 및 예시

함수 디바운스

이벤트가 발생한 후 n초 후에 콜백을 실행합니다. 이 n초 내에 다시 트리거되면 시간이 재설정됩니다.

하나(chestnut)를 보세요:

//模拟一段ajax请求
function ajax(content) {
  console.log('ajax request ' + content)
}
let inputa = document.getElementById('unDebounce')
inputa.addEventListener('keyup', function (e) {
    ajax(e.target.value)
})

코드를 복사하고 실행 결과를 확인하세요.

키보드를 누르는 동안 이 ajax 요청이 트리거되는 것을 볼 수 있습니다. 리소스 낭비일 뿐만 아니라, 실제 애플리케이션에서는 사용자가 완전한 문자를 출력한 후에만 요청을 합니다. 최적화해 보겠습니다.

//模拟一段ajax请求
function ajax(content) {
  console.log('ajax request ' + content)
}
function debounce(fun, delay) {
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
}
    
let inputb = document.getElementById('debounce')
let debounceAjax = debounce(ajax, 500)
inputb.addEventListener('keyup', function (e) {
        debounceAjax(e.target.value)
    })

코드를 복사하고 실행 결과를 살펴보세요.

손떨림 방지를 추가한 후 자주 입력하면 요청이 전송되지 않고, 지정 간격 내에 입력이 없는 경우에만 함수가 실행됩니다. 입력이 정지되었다가 일정 간격 내에 다시 입력되면 타이밍이 다시 시작됩니다.

다른 것을 보세요:

let biu = function () {
    console.log('biu biu biu',new Date().Format('HH:mm:ss'))
}
let boom = function () {
    console.log('boom boom boom',new Date().Format('HH:mm:ss'))
}
setInterval(debounce(biu,500),1000)
setInterval(debounce(boom,2000),1000)

코드를 복사하고 실행 결과를 확인하세요:

시간 간격 내에 함수가 실행되면 타이밍이 다시 트리거됩니다. biu는 처음 1.5초 실행 후 1초마다 실행되지만 boom은 한 번도 실행되지 않습니다. 시간 간격은 2초이고 실행 시간은 1초이기 때문에 타이밍이 매번 다시 트리거됩니다

손떨림 방지 기능에 대한 개인적인 이해는 마법사가 스킬을 보낼 때 막대를 읽어야 한다는 것입니다. 스킬을 다시 읽고 누르면 바가 다시 읽혀집니다.

기능 조절

은 해당 기능이 단위 시간 내에 한 번만 실행될 수 있음을 규정합니다. 이 단위 시간 내에 함수가 여러 번 실행되면 하나만 적용됩니다.

하나를 보세요:

function throttle(fun, delay) {
        let last, deferTimer
        return function (args) {
            let that = this
            let _args = arguments
            let now = +new Date()
            if (last && now < last + delay) {
                clearTimeout(deferTimer)
                deferTimer = setTimeout(function () {
                    last = now
                    fun.apply(that, _args)
                }, delay)
            }else {
                last = now
                fun.apply(that,_args)
            }
        }
    }
    let throttleAjax = throttle(ajax, 1000)
    let inputc = document.getElementById(&#39;throttle&#39;)
    inputc.addEventListener(&#39;keyup&#39;, function(e) {
        throttleAjax(e.target.value)
    })

코드를 복사하고 실행 결과를 확인하세요:

계속 입력을 하면 우리가 설정한 시간에 따라 1초마다 ajax가 실행되는 것을 볼 수 있습니다.

biubiubiu가 방금 말한 내용과 결합:

    let biubiu = function () {
        console.log('biu biu biu', new Date().Format('HH:mm:ss'))
    }
    setInterval(throttle(biubiu,1000),10)

우리가 설정한 실행 시간 간격이 아무리 작더라도 항상 1초에 한 번만 실행됩니다.

개인적 이해: 기능 조절은 FPS 게임의 발사 속도입니다. 마우스를 계속 눌러 발사하더라도 총알은 지정된 발사 속도 내에서만 발사됩니다.

요약

손떨림 방지 기능과 스로틀링 기능 모두 특정 시간에 잦은 트리거링을 방지하지만 이 두 형제의 원리는 다릅니다.

손떨림 방지 기능은 일정 시간 내에 한 번만 실행되고, 조절 기능은 간격을 두고 실행됩니다.

애플리케이션 시나리오와 결합

debounce

Lenovo 검색, 사용자가 계속해서 값을 입력할 때 흔들림 방지 기능을 사용하여 요청 리소스를 절약합니다.

창 크기 조정이 트리거되면 브라우저 창 크기를 지속적으로 조정하면 이 이벤트가 계속 트리거됩니다. 손떨림 방지를 사용하여 한 번만 트리거되도록 합니다.

throttle

연속적인 마우스 클릭, 마우스다운(단위 시간당 한 번만 트리거됨)

아래로 슬라이드할지 여부 등 스크롤 이벤트를 듣고 자동으로 더 로드하고 스로틀을 사용하여 판단하세요

위 내용은 JS 흔들림 방지 및 조절의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!