関数の振れ止めとスロットル-js

関数関数はまず、ジッタ防止と節流の比較的精錬された定義を見てみましょう.
ジッタ防止:イベントがトリガーされた後、n秒以内に関数が1回しか実行できないことを指し、n秒以内にイベントがトリガーされた場合、関数の実行時間が再計算されます.
スロットル:連続して発生するイベントはn秒以内に1回のみ実行されます.
信じて、上の定義を見てから、彼らの違いがよく分からない人もいると思います.では、私の理解について話しましょう.
ジッタ防止(debounce)
手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止手ブレ防止この時、震え防止関数が必要です.
このボタンをクリックすると、どんなに手が震えていても、ずっと震えていても、このボタンをクリックすると、サーバーに一度だけ要求が送信されます.しばらくしてから、手が震えていないことを確認したら(この間、このボタンをクリックしていません)、このボタンをクリックしてから、再びサーバーに要求が送信されます.
コードを分析すると、きっともっと分かります.

/*
@function     （    ）
@param func {Function}       
@para wait {Number}         
*/
const debounce=(func,wait)=>{
     
    let timeout;    //       ，           ，   timeout    
    return function(){
     
        if(timeout) clearTimeout(timeout) //    timeout     
        timeout = setTimeout(function(){
     
            func.apply(this)
        },wait)
    }
}
function btnClick(){
     
    console.log('      ')
}
$('#myBtn').click(debounce(btnClick,3000));

まず18行目のdebounce関数を実行し,ボタン点クリックのコールバックとして匿名関数を返す.ボタンを1回クリックするとtimeoutがundefinedとなり、10行目のコードが実行され、タイマーが設定されます.手ブレ(wait時間内にボタンがクリックされた)すると、9行目が実行され、前のタイマーをクリアしてから新しいタイマーを設定します.手が震えない(wait時間内にボタンをクリックしていない)だけで、11行目を実行し、ボタンをクリックして送信するリクエストサービスを実行します.
この手ぶれ防止関数は、手が震えない前の最後のクリックを再確認して送信したリクエストデータであることがわかります.しかし、时にはあなたはこのようにしたくありません.あなたは、私が初めてクリックした时にデータを送信しなければならないと思っています.后ろの私の手が震えています.あなたは私に間もなく送らせないようにコントロールしています.このように私の手が震えている时、データが要求されていることに気づきました.私は喜んで、手が震えていません.はい、あなたの要求を満たしています.

/*
@function     （    ）
@param func {Function}       
@para wait {Number}         
*/
const debounce=(func,wait)=>{
     
    let timeout;    
    return function(){
     
        if(timeout){
     
            clearTimeout(timeout);
        }else{
     
            func.apply(this)
        }
         timeout = setTimeout(function(){
     
            timeout =null
        },wait)
    }
}
function btnClick(){
     
    console.log('      ')
}
$('#myBtn').click(debounce(btnClick,3000));

つまり、初めてクリックしてもタイマーが設定されていない場合は、まず要求データの関数を実行し、タイマーを設定してブレを防ぐようにします.その後、どんなにブレてもtimeout値は存在します.ブレがなければ、timeoutをnullに設定し、クリックするとデータを要求することができます.
スロットル
節流節流は、その名の通り流量を節約することです.どうすれば流量を節約できるか考えてみてください.じゃ、お願いを減らすのではないでしょうか.1秒に3回、私は3秒に1回を要求するように変更して、その流量はまだ適切ではありません節約しました.例えば、あなたは1つの検索ボックスを押して、キーボードを押してサーバーに1回の要求を送って、カカの、ページはずっとあなたについてキーボードをたたくのが変化して、あなたはボスに言って、かっこいいかどうかを見て、リアルタイムで動的に検索して、この时ボスは上がってきてあなたに2つの耳かきをあげて、言って、私はどうして1つの小さいプロジェクトがこんなに良いサーバーを買うのかを知っていて、すべてあなたのこれはホホです.この時、節流はあなたを助けることができて、時間を設定して、この時間の中で、どのようにキーボードをたたいても、1回のデータだけを要求して、1つの単語に1回負けないで要求して、大いにバックグラウンドの圧力を節約して、あなたの動態の検索もとても良い実現ができます.
これは理解しやすいと思いますが、コードを直接見ればいいです.

/*
@function     
@param func {Function}       
@para wait {Number}     
*/
const throttle=(func,wait)=>{
     
    let previous  = 0;
    return function(){
     
        let nowtime = Date.now();
        if(nowtime-previous>wait){
     
            func.apply(this);
            previous = nowtime;
        }
    }
}
function keyUp(){
     
    console.log('    ')
}
$('#myInput').keyup(throttle(btnClick,1000));

このコードも分かりやすく、キーが上がるたびに、現在の時間と前回検索機能が実行された時間の差を判断し、もう一度検索するかどうかを判断します.
はい、関数の振れ防止と節流の違いと実現ははっきりしているはずです.
最後に、中華文化の博大さと先輩たちの翻訳時の知恵、debounceとthrottleがブレ防止と節流に対応し、この2つの混同しやすい概念が一気に明らかになったと感慨せざるを得ない.