JavaScript での手ぶれ補正スロットルの詳細な紹介 (コード例)

この記事では、JavaScript における手ぶれ補正の詳細な紹介 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

関数スロットルと関数アンチシェイクはどちらも、JS コードの高頻度実行を最適化する手段です。

関数スロットル (スロットル) と関数デバウンス (デバウンス) は両方とも、関数の実行頻度を制限して、関数のトリガー周波数が高すぎてトリガー周波数に追いつけないことによる応答速度を最適化するために使用されます。その結果、遅延、アニメーションの一時停止、またはラグ現象が発生します。

関数スロットル (スロットル)

関数スロットルとは、一定期間内に実行される操作が 1 回だけ実行されること、つまり、実行サイクルが 1 回だけ実行されることを意味します。アクションが呼び出された瞬間が実行サイクル以上である場合、アクションは実行され、次の新しいサイクルに入ります。より鮮明な例は、水が流れ出るまで蛇口を締めた場合です。しずくの形をしていると、時々、水滴が出てくることがわかります。

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));

関数デバウンス (デバウンス)

関数デバウンスとは、アクションが継続的かつ頻繁にトリガーされた場合に、一定期間内にのみアクションが実行されることを意味します。 1 回、つまりアクションが呼び出されてから n ミリ秒が経過した後にのみアクションが実行されます。このアクションが n ミリ秒以内に再度呼び出された場合は、実行時間が再計算されるため、短期間でアクションが実行されます。たとえば、指をバネの上に置いたままにしておくと、指を離すまでバネが上がらないとします。

タイムスタンプ

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));

タイマー

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 中国語 Web サイトの他の関連記事を参照してください。