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>
// 函数防抖节流 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('keyup',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('keyup',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('keyup',function (e) { throttleFn(e.target.value); })
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!