Une analyse approfondie de l'anti-shake/throttling ultime dans Vue3-Voir.js-php.cn

Une analyse approfondie de l'anti-shake/throttling ultime dans Vue3

青灯夜游

Libérer： 2023-02-10 19:40:25

avant

2718 Les gens l'ont consulté

Cet article vous présente l'anti-shake/throttle ultime dans Vue 3 (y compris les méthodes courantes d'anti-shake/throttle). Cet article décrira non seulement les méthodes anti-shake ou throttle d'origine, mais il apportera également un nouvel emballage). méthode plus simple et plus claire à utiliser.

Une analyse approfondie de l'anti-shake/throttling ultime dans Vue3

Dans le processus de développement front-end, le processus impliquant une interaction avec les utilisateurs doit essentiellement être traité. L'opération normale consiste à ajouter un anti-shake ou une limitation à la position correspondante.

Ajout de fonctions anti-tremblement ou de limitation : premièrement, pour empêcher les utilisateurs d'effectuer des opérations fréquentes, deuxièmement, pour économiser certaines ressources du serveur et réduire le gaspillage de ressources.

Principe d'anti-secousse ou d'étranglement

Anti-secousse (anti-rebond)

Si l'utilisateur opère plusieurs fois fréquemment, la dernière fois prévaudra bien sûr, la première fois peut également être utilisée. comme base pour la mise à jour des données ou les demandes de ressources réseau pour éliminer les opérations redondantes ou réduire un certain gaspillage de ressources de demande. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]

Exemple de code

function debounce (fn, delay = 300){
    let timer = null
    return function (...args) {
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn.call(this, ...args)
        }, delay);
    }
}

Copier après la connexion

Utiliser

debounce(()=> count += 1, 1000)

Copier après la connexion

throttle (throttle)

Dans un certain plage horaire, le déclencheurs utilisateur Il ne sera exécuté qu'une seule fois plusieurs fois pour empêcher les utilisateurs d'effectuer des opérations fréquentes.

Exemple de code

let timer = null
function throttle (fn, delay = 300) {
    if(timer == null){
        timer = setTimeout(() => {
            fn()

            clearTimeout(timer)
            timer = null
        }, delay);
    }
}

Copier après la connexion

Utilisation

throttle(()=> count += 1, 1000)

Copier après la connexion

Instructions d'environnement

vue 3
vite

Nouveau package

Ici, j'en parlerai en deux modules. L’un est anti-tremblement ; l’autre est étrangleur.

Bien que la différence entre les deux ne soit pas très grande, il y a quand même une différence. Montez dans la voiture, les gars.

Debounce

Examinons d'abord le contenu commun des packages.

Paquets communs-1

Code

function debounce (fn, delay = 300){
    let timer = null
    return function (...args) {
        if(timer != null){
            clearTimeout(timer)
            timer = null
        }
        timer = setTimeout(()=>{
            fn.call(this, ...args)
        }, delay);
    }
}

Copier après la connexion

Utiliser

const addCount = debounce(()=> count.value += 1, 1000)

Copier après la connexion

Paquets communs-2

Code

let timer = null
function debounce (fn, delay = 1000){
    if(timer != null){
        clearTimeout(timer)
        timer = null
    }
    timer = setTimeout(fn, delay)
}

Copier après la connexion

Utiliser

const addCount = () => debounce(()=> count.value += 1, 1000)

Copier après la connexion

Nouveau paquet

Ici, nous devons utiliser vue 3 < <code>customRef dans /code> pour mettre en œuvre notre nouvelle approche. Je n’écrirai pas en détail ici. J'ajoute des commentaires directement au-dessus de chaque ligne de code. Je crois que mon ami, tu peux comprendre. vue 3 中的 customRef 来实现我们的新方式。这里我就不具体写了。我直接在每行代码上面添加注释。我相信朋友你是能看懂的。

代码

// 从 vue 中引入 customRef 和 ref
import { customRef, ref } from "vue"

// data 为创建时的数据
// delay 为防抖时间
function debounceRef (data, delay = 300){
    // 创建定时器
    let timer = null;
    // 对 delay 进行判断，如果传递的是 null 则不需要使用 防抖方案，直接返回使用 ref 创建的。
    return delay == null 
        ? 
        // 返回 ref 创建的
        ref(data)
        : 
        // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
        customRef((track, trigger) => {
            return {
                get () {
                    // 收集依赖
                    track()
                    // 返回当前数据的值
                    return data
                },
                set (value) {
                    // 清除定时器
                    if(timer != null){
                        clearTimeout(timer)
                        timer = null
                    }
                    // 创建定时器
                    timer = setTimeout(() => {
                        // 修改数据
                        data = value;
                        // 派发更新
                        trigger()
                    }, delay)
                }
            }
        })
}

Copier après la connexion

使用

// 创建
const count = debounceRef(0, 300)

// 函数中使用
const addCount = () => {
  count.value += 1
}

// v-model 中使用
<input type="text" v-model="count">

Copier après la connexion

节流（throttle）

我们还是一样，先看常见封装内容。

常见封装-1

代码

let timer = null
function throttle (fn, delay = 300) {
    if(timer == null){
        timer = setTimeout(() => {
            fn()

            clearTimeout(timer)
            timer = null
        }, delay);
    }
}

Copier après la connexion

使用

const addCount = () => throttle(()=> count.value += 1, 1000)

Copier après la connexion

常见封装-2

代码

function throttle (fn, delay = 300) {
    let timer = null
    return function (...args) {
        if(timer == null){
            timer = setTimeout(() => {
                fn.call(this, ...args)
    
                clearTimeout(timer)
                timer = null
            }, delay);
        }
    }
}

Copier après la connexion

使用

const addCount = throttle(()=> count.value += 1, 1000)

Copier après la connexion

新封装

节流和防抖在封装和使用上大同小异。

代码

// data 为创建时的数据
// delay 为节流时间
function throttleRef (data, delay = 300){
    // 创建定时器
    let timer = null;
    // 对 delay 进行判断，如果传递的是 null 则不需要使用 节流方案，直接返回使用 ref 创建的。
    return delay == null 
        ? 
        // 返回 ref 创建的
        ref(data)
        : 
        // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
        customRef((track, trigger) => {
            return {
                get () {
                    // 收集依赖
                    track()
                    // 返回当前数据的值
                    return data
                },
                set (value) {
                    // 判断
                    if(timer == null){
                        // 创建定时器
                        timer = setTimeout(() => {
                            // 修改数据
                            data = value;
                            // 派发更新
                            trigger()
                            // 清除定时器
                            clearTimeout(timer)
                            timer = null
                        }, delay)
                    }
                    
                }
            }
        })
}

Copier après la connexion

使用

// 创建
const count = debounceRef(0, 300)

// 函数中使用
const addCount = () => {
  count.value += 1
}

// v-model 中使用
<input type="text" v-model="count">

Copier après la connexion

总结

以上便是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章的全部内容，如有不足或朋友你有更好的方式或者其他独到的见解，欢迎评论 + 私信。

当然朋友你又学到了一招可以点赞 + 关注 + 评论哦。

希望本篇文章对正在阅读的朋友你有所帮助。

想了解vue 2Coderrreee

Utilisation de

rrreee throttle

🎜🎜Nous sommes toujours les mêmes, regardez d'abord le contenu commun de l'emballage. 🎜🎜🎜Paquets communs-1🎜🎜🎜Code 🎜rrreee🎜Utiliser 🎜rrreee🎜🎜Paquets communs-2🎜🎜🎜Code 🎜rrreee🎜Utiliser 🎜rrreee🎜🎜Nouveau paquet🎜🎜 🎜Létranglement et anti-secousse dans l'emballage et utilisation beaucoup le même. 🎜🎜Code🎜rrreee🎜Utilisation🎜rrreee🎜🎜Résumé🎜🎜🎜🎜Ce qui précède est L'anti-shake/throttle ultime dans Vue 3 (y compris les méthodes courantes d'anti-shake/throttle) S'il y a toute lacune dans l'ensemble du contenu ou si vous avez un meilleur moyen ou d'autres idées uniques, n'hésitez pas à commenter + envoyer un message privé. 🎜🎜🎜Bien sûr, mon ami, tu as appris une autre astuce, tu peux aimer + suivre + commenter. 🎜🎜J'espère que cet article vous sera utile, amis qui lisez. 🎜🎜Les amis qui veulent savoir comment implémenter la même solution dans vue 2 peuvent cliquer ici 🎜 Implémentation de l'anti-shake/throttling CustomRef dans Vue 2🎜🎜🎜 (Partage vidéo d'apprentissage : 🎜introduction à vuejs ? tutoriel🎜, 🎜Vidéo de programmation de base🎜)🎜

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!