Eine ausführliche Analyse des ultimativen Anti-Shake/Throttling in Vue3

Dieser Artikel stellt Ihnen das ultimative Anti-Shake/Throttle in Vue 3 vor (einschließlich gängiger Anti-Shake/Throttle-Methoden). In diesem Artikel werden nicht nur die ursprünglichen Anti-Shake- oder Throttling-Methoden beschrieben, sondern auch eine neue Verpackung Methode, die einfacher und klarer anzuwenden ist.

Im Front-End-Entwicklungsprozess muss grundsätzlich der Prozess der Interaktion mit Benutzern verarbeitet werden. Der normale Vorgang besteht darin, an der entsprechenden Position Anti-Shake oder Drosselung hinzuzufügen.

Anti-Shake- oder Drosselungsfunktionen hinzugefügt: Erstens, um Benutzer von häufigen Vorgängen abzuhalten; zweitens, um bestimmte Serverressourcen zu schonen und Ressourcenverschwendung zu reduzieren.

Anti-Shake- oder Drosselungsprinzip

---

Anti-Shake (Entprellung)

Wenn der Benutzer mehrmals häufig betätigt, hat das letzte Mal Vorrang. Natürlich kann auch das erste Mal verwendet werden als Grundlage für Datenaktualisierungen oder Netzwerkressourcenanforderungen, um redundante Vorgänge zu eliminieren oder eine bestimmte Verschwendung von Anforderungsressourcen zu reduzieren. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]

Beispielcode

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

Verwenden Sie

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

Drossel (Drossel)

In einem bestimmten Zeitbereich ist die Benutzerauslöser Es wird nur einmal und mehrmals ausgeführt, um zu verhindern, dass Benutzer häufige Vorgänge ausführen.

Beispielcode

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

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

Verwendung

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

Umgebungsbeschreibung

---

• vue 3

• vite

Neues Paket

---

Hier werde ich in zwei Modulen darüber sprechen. Einer ist Anti-Shake, der andere ist Throttling.

Obwohl der Unterschied zwischen den beiden nicht sehr groß ist, gibt es dennoch einen Unterschied. Steigt ins Auto, Leute.

Debounce

Schauen wir uns zunächst den allgemeinen Paketinhalt an.

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

Verwenden Sie

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

Gemeinsame Pakete-2

Code

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

Verwenden Sie

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

Neues Paket

Hier müssen wir vue 3 verwenden < <code>customRef in /code>, um unseren neuen Ansatz zu implementieren. Ich werde hier nicht im Detail schreiben. Ich füge Kommentare direkt über jeder Codezeile hinzu. Ich glaube, mein Freund, du kannst es verstehen. 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)
                }
            }
        })
}

使用

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

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

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

节流（throttle）

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

常见封装-1

代码

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

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

使用

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

常见封装-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);
        }
    }
}

使用

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

新封装

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

代码

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

使用

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

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

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

总结

---

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

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

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

想了解vue 2Coderrreee

Verwendung von

rrreeeThrottle

🎜🎜Wir sind immer noch die gleichen, schauen Sie sich zunächst den gemeinsamen Verpackungsinhalt an. 🎜🎜🎜Gemeinsame Pakete-1🎜🎜🎜Code 🎜rrreee🎜Verwenden Sie 🎜rrreee🎜🎜Gemeinsame Pakete-2🎜🎜🎜Code 🎜rrreee🎜Verwenden Sie 🎜rrreee🎜🎜Neues Paket 🎜🎜🎜Drosselung und Anti-Shake im Paket und viel Verwendung das gleiche. 🎜🎜Code🎜rrreee🎜Verwendung🎜rrreee🎜🎜Zusammenfassung🎜🎜🎜🎜Das Obige ist Der ultimative Anti-Shake/Throttle in Vue 3 (einschließlich gängiger Anti-Shake/Throttle-Methoden) Falls vorhanden Bei Mängeln im gesamten Inhalt oder wenn Sie einen besseren Weg oder andere einzigartige Erkenntnisse haben, können Sie gerne einen Kommentar abgeben und eine private Nachricht senden. 🎜🎜🎜Natürlich, mein Freund, du hast noch einen weiteren Trick gelernt, du kannst liken + folgen + kommentieren. 🎜🎜Ich hoffe, dass dieser Artikel für eure Lesefreunde hilfreich sein wird. 🎜🎜Freunde, die wissen möchten, wie man dieselbe Lösung in vue 2 implementiert, können hier klicken? Einführungs-Tutorial🎜, 🎜Grundlegendes Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonEine ausführliche Analyse des ultimativen Anti-Shake/Throttling in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!