Bye Lodash

Sommaire

1. Présentation
2. Tutoriel vidéo
3. Debounce
4. Throttle
5. Conclusion

Présentation

Lodash c’est une librairie vraiment super. Sauf que l’on a tendance ces derniers temps à ajouter des dépendances un peu trop facilement à nos projets.

On perd donc en maintenabilité et on fait de nos mises à jour un enfer.

Aujourd’hui, on met Lodash à la poubelle et on apprend à se créer soi-même nos fonctions debounce et throttle !

Tutoriel vidéo

Debounce

J’utilise un watch dans mon composant Vue.js de manière à faire un appel d’API chaque fois que l’input est mis à jour.

Cette fausse bonne idée nous apporte plus de mal que de bien : nous faisons des appels au serveur en pagaille ! Il va falloir se créer notre propre fonction debounce pour pouvoir décaler notre appel dans le temps.

De cette manière, l’appel API se fera seulement lorsque l’utilisateur a terminé d’inscrire dans l’input.

Pour ce faire, je place ceci dans mon Utils.js :

    const debounce = (callback, maxDuration) => {
    let timer;

    return (...args) => {
        clearTimeout(timer);

        timer = setTimeout(() => {
            callback.apply(this, args);
        }, maxDuration);
    }
}

Il ne me reste plus qu’à retourner la fonction qui se réinitialise toute seule dans mon composant.

watch(name, throttle((newValue, oldValue) => {
    console.log('APPEL API', newValue);
}, 2000));

Throttle

Je m’inspire maintenant de ma mouture initiale pour créer une fonction throttle qui renverra cette fois-ci une fonction qui attendra de ne plus être “bouchée” pour faire un appel API.

    const throttle = (callback, maxDuration) => {
    let throttled = false;

    return (...args) => {
        if (throttled === false) {
            callback.apply(this, args);

            throttled = true;

            setTimeout(() => throttled = false, maxDuration);
        }
    }
}

Conclusion

Vous savez maintenant comment développer 2 fonctions qui peuvent paraître impressionnantes, mais finalement pas tant que ça !

N’hésitez pas à me suivre et à vous abonner à Laravel Jutsu pour plus de contenu !