JavaScript의 흔들림 방지 조절에 대한 자세한 소개(코드 예)

이 글은 JavaScript의 손떨림 방지 조절에 대한 자세한 소개(코드 예제)를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

조절 기능과 흔들림 방지 기능은 모두 js 코드의 고주파수 실행을 최적화하는 수단입니다.

함수 제한(throttle) 및 함수 디바운스(debounce)는 둘 다 함수의 실행 빈도를 제한하여 함수 트리거 주파수가 너무 높아서 트리거 주파수를 따라갈 수 없어 발생하는 응답 속도를 최적화하여 지연, 일시 중단을 초래합니다. 애니메이션 또는 동결.

함수 조절(throttle)

함수 조절은 일정 시간 내에 실행되는 작업이 한 번만 실행되는 것을 의미합니다. 즉, 해당 작업이 호출되는 시점에 실행 주기가 미리 설정되어 있다는 뜻입니다. 실행 주기보다 크거나 같으면 실행이 실행된 후 다음 새 주기로 들어갑니다. 더 생생한 예는 물이 물방울 형태로 흘러나올 때까지 수도꼭지를 조이면 다음을 알 수 있습니다. 가끔씩 물 한 방울이 흘러나올 것이다.

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
// 处理函数
function handle() {   
    console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

Function debounce(디바운스)

Function debounce는 특정 시간 내에 작업이 지속적으로 자주 실행될 때 해당 작업이 한 번만 실행된다는 의미입니다. 즉, 이후 n 밀리초가 경과했다는 뜻입니다. 액션이 호출되면 해당 액션이 n 밀리초 내에 다시 호출되면 실행 시간이 다시 계산되므로 짧은 시간 동안 연속 액션이 한 번만 실행됩니다. 스프링을 손가락으로 계속 누르고 있으면 스프링이 놓을 때까지 튀어오르지 않습니다.

Timestamp

var throttle = function(func, delay) {           
    var prev = Date.now();           
    return function() {               
        var context = this;               
        var args = arguments;               
        var now = Date.now();               
        if (now - prev >= delay) {                   
            func.apply(context, args);                   
            prev = Date.now();               
        }           
    }       
}       
function handle() {           
    console.log(Math.random());       
}       
window.addEventListener('scroll', throttle(handle, 1000));

Timer

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

위 내용은 JavaScript의 흔들림 방지 조절에 대한 자세한 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!