Introduction détaillée à la limitation anti-shake en JavaScript (exemple de code)

Cet article vous apporte une introduction détaillée (exemple de code) sur la limitation anti-shake en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Limitation des fonctions et fonction anti-shake, toutes deux sont un moyen d'optimiser l'exécution à haute fréquence du code js.

La limitation de fonction (accélérateur) et la fonction anti-rebond (anti-rebond) sont toutes deux utilisées pour limiter la fréquence d'exécution de la fonction afin d'optimiser la vitesse de réponse provoquée par la fréquence de déclenchement de la fonction étant trop élevée pour suivre la fréquence de déclenchement, entraînant des retards, une animation suspendue ou un phénomène de décalage.

Limitation de fonction (throttle)

Limitation de fonction signifie qu'une opération effectuée dans un certain laps de temps n'est exécutée qu'une seule fois, c'est-à-dire qu'un cycle d'exécution est prédéfini. Lorsque le moment où l'action est appelée est supérieur ou égal au cycle d'exécution, l'action est exécutée puis entre dans le nouveau cycle suivant. Un exemple plus frappant est si vous serrez le robinet jusqu'à ce que l'eau s'écoule sous la forme. de gouttes, vous constaterez que de temps en temps, une goutte d'eau en sortira.

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
// 处理函数
function handle() {   
    console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

Fonction anti-rebond (anti-rebond)

La fonction anti-rebond signifie que dans un certain laps de temps, lorsque l'action est déclenchée de manière continue et fréquente, l'action ne fera que est exécutée une seule fois, c'est-à-dire que l'action ne sera exécutée qu'après n millisecondes après l'action appelante. Si cette action est à nouveau appelée dans ces n millisecondes, le temps d'exécution sera recalculé, donc les actions seront continues sur une courte période. du temps ne se déclenchera qu'une seule fois, par exemple, si vous continuez à appuyer sur un ressort avec votre doigt, il ne jaillira que lorsque vous le lâcherez.

Horodatage

var throttle = function(func, delay) {           
    var prev = Date.now();           
    return function() {               
        var context = this;               
        var args = arguments;               
        var now = Date.now();               
        if (now - prev >= delay) {                   
            func.apply(context, args);                   
            prev = Date.now();               
        }           
    }       
}       
function handle() {           
    console.log(Math.random());       
}       
window.addEventListener('scroll', throttle(handle, 1000));

Minuterie

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

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!