Comment implémenter la fonction anti-shake et throttling dans js

Compréhension conceptuelle

Anti-shake : Exécutez le rappel n secondes après le déclenchement de l'événement. S'il se déclenche à nouveau dans ces n secondes, redémarrez le temps.

Limitation : Il est stipulé que la fonction ne peut être déclenchée qu'une seule fois par unité de temps. Si la fonction est déclenchée plusieurs fois dans cette unité de temps, une seule prendra effet.

Recommandations associées : "Tutoriel JavaScript avancé"

La différence entre la fonction js anti-shake et throttling :

Fonction anti-shake Jittering signifie s'exécuter une seule fois dans un certain laps de temps, tandis que la limitation des fonctions signifie s'exécuter à intervalles réguliers.

Pièges personnels

1. Après avoir compris les concepts de fonction anti-tremblement et de limitation de fonction, les fermetures sont utilisées pour mettre en œuvre les fonctions anti-tremblement et de limitation, sans en tenir compte. compte Pour la limitation, si l'utilisateur a terminé la saisie avant la prochaine requête, mais ne fera pas d'autre requête à ce moment-là, le dernier texte saisi sera modifié par d'autres événements et aucune requête ne sera envoyée, c'est-à-dire une requête sera manqué, donc une fonction setTimeout doit être ajoutée. Et chaque fois lors de la préparation d'une demande, définissez un indicateur, c'est-à-dire si la demande a été envoyée. Si la demande est envoyée dans un cycle normal, changez-le en vrai. Sinon, c'est faux. Utilisez setTimeout, laissez setTimeout être légèrement plus long que les événements restants et prenez la priorité sur la demande de minuterie d'accélérateur

2.

Mise en œuvre du code

 <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);
})

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!