Vue3 の究極のアンチシェイク/スロットリングの詳細な分析-Vue.js-php.cn

Vue3 の究極のアンチシェイク/スロットリングの詳細な分析

青灯夜游

リリース： 2023-02-10 19:40:25

転載

2718 人が閲覧しました

この記事では、Vue 3 の究極のアンチシェイク/スロットル (アンチシェイク/スロットルの一般的な方法を含む) について説明します。この記事では、元のアンチシェイクまたはスロットルの方法について説明するだけでなく、新しい方法も提供します。よりシンプルかつ明確に使用できるパッケージ方法。

Vue3 の究極のアンチシェイク/スロットリングの詳細な分析

フロントエンド開発プロセスでは、基本的にユーザーとのインタラクションを伴う処理が必要となり、対応する位置に手ぶれ補正を付加するのが通常の動作です。またはスロットリング。

手ぶれ補正またはスロットル機能を追加します。第一に、ユーザーが頻繁に操作するのを防ぎ、第二に、特定のサーバーリソースを節約し、リソースの無駄を削減します。

手ぶれ防止またはスロットルの原理

手ぶれ防止 (デバウンス)

#ユーザーが頻繁に複数回操作する場合、最後の時間が優先されます。もちろん、初回をデータ更新やネットワークリソース要求の基準として使用して、冗長な操作を排除したり、一定量の無駄を削減したりすることもできます。リソースを要求します。 [関連する推奨事項: vuejs ビデオチュートリアル、Web フロントエンド開発 ]

サンプルコード

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

ログイン後にコピー

Use

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

ログイン後にコピー

Throttle (スロットル)

特定の時間範囲内で、ユーザーが複数回トリガーした場合、ユーザーが頻繁に操作を行うことを防ぐため、一度実行されます。

#サンプルコード

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

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

ログイン後にコピー

使用方法

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

ログイン後にコピー

環境の説明

vue 3

新しいパッケージ

ここで分割しますそれぞれのモジュールについて話しましょう。 1 つは手ぶれ補正、もう 1 つはスロットルです。

両者の差はそれほど大きくありませんが、それでも違いはあります。車に乗りなさい、みんな。

Debounce

まず、共通のパッケージの内容を見てみましょう。

共通カプセル化-1

コード

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

ログイン後にコピー

使用法

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

ログイン後にコピー

共通カプセル化-2

コード

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

ログイン後にコピー

使用

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

ログイン後にコピー

新しいパッケージ

ここでは、

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 2 での CustomRef メソッドのアンチシェイク/スロットリングの実装 (学習ビデオ共有:

vuejs 入門チュートリアル

、基本プログラミングビデオ )

以上がVue3 の究極のアンチシェイク/スロットリングの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。