Implémentation des fonctions de limitation et d'anti-shake en Javascript (avec code)

Le contenu de cet article concerne l'implémentation de la limitation des fonctions et de l'anti-shake en Javascript (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Limitation de fonction (accélérateur)

Explication des termes

Limitation de fonction (accélérateur) : exécution continue de fonctions, exécution de fonctions à certains intervalles

Utiliser la scène

mouvement de la souris, événement mousemove
positionnement dynamique des éléments DOM, événements de redimensionnement et de défilement de l'objet fenêtre
etc...

Implémentation simple de la limitation des fonctions

    function throttle(fn, delay) {
        var last; // 上次执行的时间
        var timer; // 定时器
        delay || (delay = 250); // 默认间隔为250ms
        return function() {
            var context = this;
            var args = arguments;
            var now = +new Date(); // 现在的时间
            if (last && now < last + delay) { // 当前距离上次执行的时间小于设置的时间间隔
                clearTimeout(timer); // 清除定时器
                timer = setTimeout(function() { // delay时间后，执行函数
                    last = now;
                    fn.apply(context, args);
                }, delay);
            } else { // 当前距离上次执行的时间大于等于设置的时间，直接执行函数
                last = now;
                fn.apply(context, args);
            }
        };
    }

Fonction anti-rebond (anti-rebond)

Explication du terme

Fonction anti-rebond (anti-rebond) : L'appel ne sera exécuté que lorsque le temps d'inactivité doit être supérieur ou égal à une certaine valeur Méthode

Scénario d'utilisation

Événement de saisie de texte
etc...

Implémentation simple de la fonction anti-rebond

    function debounce(fn, delay) {
        var timer; // 定时器
        delay || (delay = 250); // 默认空闲时间250ms
        return function() {
            var context = this;
            var args = arguments;
            clearTimeout(timer); // 清除定时器
            timer = setTimeout(function() { // delay时间后，执行函数
                fn.apply(context, args);
            }, delay);
        };
    }

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!