Heim > Web-Frontend > js-Tutorial > So implementieren Sie die Anti-Shake- und Throttling-Funktion in js

So implementieren Sie die Anti-Shake- und Throttling-Funktion in js

藏色散人
Freigeben: 2020-05-24 13:34:49
nach vorne
2339 Leute haben es durchsucht

Konzeptionelles Verständnis

Anti-Shake: Führen Sie den Rückruf n Sekunden nach Auslösung des Ereignisses aus. Wenn er innerhalb dieser n Sekunden erneut ausgelöst wird, starten Sie die Zeit neu.

Drosselung: Es ist festgelegt, dass die Funktion nur einmal innerhalb einer Zeiteinheit ausgelöst werden darf. Wird die Funktion innerhalb dieser Zeiteinheit mehrmals ausgelöst, wird nur einmal wirksam.

Verwandte Empfehlungen: „Erweitertes JavaScript-Tutorial

Der Unterschied zwischen der js-Funktion Anti-Shake und Throttling:

Funktion Anti-Shake-Jitter bedeutet, dass es nur einmal innerhalb eines bestimmten Zeitraums ausgeführt wird, während Funktionsdrosselung bedeutet, dass es in Intervallen ausgeführt wird.

Persönliche Fallstricke

1. Nach dem Verständnis der Konzepte der Funktion Anti-Shake und der Funktionsdrosselung werden Schließungen verwendet, um die Funktion Anti-Shake und Drosselung zu implementieren, ohne sie zu berücksichtigen Konto Zur Drosselung: Wenn der Benutzer die Eingabe vor der nächsten Anfrage abgeschlossen hat, zu diesem Zeitpunkt aber keine weitere Anfrage stellt, wird der zuletzt eingegebene Text durch andere Ereignisse geändert, ohne dass eine Anfrage gesendet wird, dh eine Anfrage wird verpasst , daher muss eine setTimeout-Funktion hinzugefügt werden, und jedes Mal, wenn eine Anfrage vorbereitet wird, wird ein Flag gesetzt, das heißt, ob die Anfrage in einem normalen Zyklus gesendet wurde, ändern Sie es auf „true“. Seien Sie falsch. Verwenden Sie setTimeout, lassen Sie setTimeout etwas länger als die übrigen Ereignisse und nehmen Sie die Priorität des Throttle-Timers ein.

2.

Code-Implementierung

 <div>
    <div>
        <input type="text" id="unDebounce">
    </div>
    <div>
        <input type="text" id="debounce">
    </div>
    <div>
        <input type="text" id="throttle">
    </div>
</div>
Nach dem Login kopieren
// 函数防抖节流
var elem1 = document.getElementById("unDebounce")
var elem2 = document.getElementById("debounce")
var elem3 = document.getElementById("throttle")
// 不防抖
function ajax1(value){
    console.log("不防抖,不节流")
    console.log(value)
}
elem1.addEventListener(&#39;keyup&#39;,function (e) {
    ajax1(e.target.value);
})
// 防抖
function ajax2(value) {
    console.log(value)
}
function debounce(func,delay){
    console.log("函数防抖")
    let timer = null;
    return function(...args){
        if(timer){
            console.log("清除定时器")
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            console.log("重新计时")
            func.call(this,...args)
        },delay)
    }
}
let debounceFn = debounce(ajax2,1000)
elem2.addEventListener(&#39;keyup&#39;,function (e) {
    debounceFn(e.target.value);
})
// // 节流
function ajax3(value){
    console.log(value)
}
function throttle(func,delay){
    console.log("函数节流")
    let lastTime = 0;
    let timer = null;
    return function (...args) {
        let flag = false ; // 还没发送数据
        let now = +new Date().getTime();
        if(timer){
            clearTimeout(timer)
        }
        if(now-lastTime>=delay){
            console.log("当前时间大于设定时间,开始执行函数")
            func.apply(this,args)
            console.log("time1",new Date().getTime())
            lastTime = now;
            flag = true; // 发送了数据
        }else{
            timer = setTimeout(()=>{
                if(!flag){ // 如果没有发送数据成功,再走这个,兜底发送请求
                    func.apply(this,args)
                    console.log("time2",new Date().getTime())
                }
            },delay-(now-lastTime)+1000) // setTimeout多一些,优先执行周期性请求
        }
    }
}
let throttleFn = throttle(ajax3,5000)
elem3.addEventListener(&#39;keyup&#39;,function (e) {
    throttleFn(e.target.value);
})
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Anti-Shake- und Throttling-Funktion in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
js
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage