振れ防止と節流の理解と応用例

タイトルはブレ止めです。

ジッタ防止ポリシーは、イベントがトリガーされた後、n秒遅延した後にコールバックを実行し、このn秒以内にイベントがトリガーされた場合に再カウントする.城に戻って中断されたように、城に戻りたい場合、手ぶれ防止ケースを再計時しなければならない.ユーザーが入力ボックスに文字を連続的に入力した場合、手ぶれ防止戦略を通じて、入力が終わった後だけ、クエリーの要求を実行することができる.このように、要求回数を効果的に減らし、要求資源を節約することができる.

<input type="text"><span>span>

var timer = null;
//              ，       。     ，         
document.querySelector('input').onkeyup = function () {
    if (timer !== null) {
        clearTimeout(timer);
    };
    timer = setTimeout( () => {
        var val = this.value;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/getName?username=' + val)
        xhr.onload = function () {
            var res = JSOn.parse(this.response);
            document.querySelector('span').innerText = res.msg;
        };
        xhr.send(null)
    }, 500)
}

スロットルとは

スロットルポリシー(throttle)は、その名の通り、しばらくの間イベントのトリガ頻度を減らすことができます.弾丸を発射する射速のように、いくら押しても射速はスロットルケースを増加させません:マウスに従って移動する天使の効果を最適化します:スロットル関数を加えた後、mousemove時間の出発に伴って出発して、一定の時間(20 ms)の制限があって、性能を節約して、もちろんこれはスロットルケースの1つの小さい応用にすぎません

<img src="./angle.jpg" alt="">

var timer = null;
document.onmousemove = function (e) {
    if (timer !== null) {
        //           
        return;
    };
    timer = setTimerout(() => {
        document.querySelector('img').style.left = e.pageX + 'px';
        document.querySelector('img').style.top = e.pageX + 'px';
        //      
        timer = null
    }, 20) //            ，     
}