JSでの関数ブレ止め

一、関数ブレ止めとは

概念:関数ジッタ防止(debounce)とは、イベントがトリガーされた後、n秒以内に関数が1回しか実行されず、イベントがトリガーされた後にn秒以内にイベントがトリガーされた場合、関数遅延実行時間が再計算されることを意味する.
栗を挙げて、エレベーターに乗るとき、誰かが入ってきたと検出されると10秒待ちになり、また誰かが入ってきたら(10秒以内にトリガを繰り返す)、エレベーターはさらに10秒待ちになります.上記の例では、エレベータが10秒に入る人がいることを検出してから、エレベータのドアを閉じて運転を開始するので、「関数振れ止め」の鍵は、
イベントが発生しました
一定時間後に実行
特定のアクション.

二、なぜ関数の振れ止めが必要なのか

フロントエンド開発では、onresize、scroll、mousemove、mousehoverなどのイベントが頻繁にトリガーされ(短時間で複数回トリガーされる)、制限をしないと1秒に数十回、数百回実行される可能性があり、これらの関数の内部で他の関数、特にDOMを操作した関数(ブラウザ操作DOMはパフォーマンスがかかる)が実行された場合、それはコンピュータのリソースを浪費するだけでなく、プログラムの実行速度を低下させ、ブラウザのカードが死んだり、クラッシュしたりします.この問題は明らかに致命的だ.
このほか,短時間で繰り返されるajax呼び出しは,データ関係の混乱をもたらすだけでなく,ネットワークの混雑をもたらし,サーバの圧力を増大させるだけでなく,この問題も解決する必要があることは明らかである.

三、関数の振れ防止はどのように上述の問題を解決するか

上记の问题分析から、よく考えてみると、次のような解决策が考えられます.
関数ブレ止めのポイントは、
settimeoutは実装を支援し,実行に必要なコードを遅延させる.メソッドが複数回トリガーされると、前回記録した遅延実行コードを
クリアタイムアウトをクリアし、計時を再開します.タイマ期間中にイベントが再トリガされず、遅延時間のタイマが完了すると、ターゲットコードが実行されます.

四、関数振れ防止のコード実現

以上の分析に基づいて、「関数振れ防止」について簡単なコード実装を行い、以下のようにした.

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("resize",debounce(handle,1000));

以上のコードは本人が直接測定するのに有効で、仲間たちは安心して食べることができます(注意して、関数のトリガ方式は“resize”で、ウィンドウの大きさを変えて、ブラウザのコンソールの変化を観察します).

五、関数節流の使用シーン

関数の振れ止めは一般的にどんな場合に使われますか?一般に,連続したイベントが1回だけコールバックをトリガーする場合に用いられる.具体的には、

検索ボックス検索入力.ユーザーが最後に入力してから要求を送信するだけです.

ユーザー名、携帯電話番号、メールボックス入力検証;

ブラウザのウィンドウサイズが変更された後、ウィンドウの調整が完了した後、resizeイベントのコードを実行し、重複レンダリングを防止します.

現在出会った用途はこれらであり、原理と実現構想を理解し、パートナーはそれをいかなる必要な場合にも運用し、コードの品質を高めることができる.

まとめ

関数ブレ止めは、実は「即時実行版」と「非即時実行版」に分かれており、字面の意味から彼らの違いがわかります.即時実行版とは、イベントがトリガーされた後に関数が直ちに実行されず、n秒後に実行され、n秒以内にイベントがトリガーされた場合、関数実行時間が再計算されます.一方、「即時実行版ではない」とは、イベントがトリガーされると関数が直ちに実行され、n秒以内にイベントがトリガーされずに関数を実行し続ける効果を意味します.
開発の過程で、どのバージョンのジッタ防止関数を使用する必要があるかを異なるシーンに基づいて決定する必要があります.一般的に、上記のジッタ防止関数はほとんどのシーンのニーズを満たすことができます.しかし、非即時実行版と即時実行版のジッタ防止関数を組み合わせて、最終的な双剣合璧版のジッタ防止関数を実現することもできます.以下は仲間たちのために簡単な実現をしました.

/**
 * @desc      ---“      ”   “       ”      
 * @param  func        
 * @param  wait       （  ）
 * @param  immediate---true      ，false       
 **/
function debounce(func,wait,immediate) {
    let timer;

    return function () {
        let context = this;
        let args = arguments;

        if (timer) clearTimeout(timer);
        if (immediate) {
            var callNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, wait)
            if (callNow) func.apply(context, args)
        } else {
            timer = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

function handle(){
    console.log(Math.random());
}

// window.addEventListener("mousemove",debounce(handle,1000,true)); //         
window.addEventListener("mousemove",debounce(handle,1000,false)); //          

この文の関连するコードと知识の点はすべて详しく调査して、推敲して、コードは直接使うことができて、もし疑问あるいは改正する地方があるならば、下の评论区で伝言を残して、私は直ちに解答してあるいは改正します.