Vue3의 궁극적인 흔들림 방지/스로틀링에 대한 심층 분석

이 기사에서는 Vue 3의 궁극적인 흔들림 방지/스로틀 기능을 제공합니다(흔들림 방지/스로틀의 일반적인 방법 포함). 이 기사에서는 원래의 흔들림 방지 또는 스로틀링 방법을 설명할 뿐만 아니라 새로운 포장도 제공합니다. 더 간단하고 명확하게 사용할 수 있는 방법입니다.

프론트엔드 개발 과정에서는 기본적으로 사용자와의 상호작용 과정을 처리해야 하는데, 일반적인 동작은 해당 위치에 손떨림 방지나 스로틀링을 추가하는 것입니다.

손떨림 방지 또는 제한 기능 추가: 첫째, 사용자의 빈번한 작업을 방지하고 둘째, 특정 서버 리소스를 절약하고 리소스 낭비를 줄입니다.

손떨림 방지 또는 조절 원리

---

손떨림 방지(디바운스)

사용자가 여러 번 자주 작동하는 경우 마지막 시간이 우선 적용됩니다. 또는 중복 작업을 제거하거나 특정 요청 리소스 낭비를 줄이기 위해 네트워크 리소스 요청을 위한 기반으로 사용할 수 있습니다. [관련 권장사항: vuejs 동영상 튜토리얼, 웹 프론트엔드 개발]

샘플 코드

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

Using

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

환경 설명

---

• vue 3

• vite

새 패키지

---

여기서는 두 가지 모듈로 나누어서 이야기하겠습니다. 하나는 흔들림 방지이고 다른 하나는 스로틀링입니다.

둘의 차이는 그다지 크지 않지만 여전히 차이가 있습니다. 차에 타라 얘들아

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을 사용해야 합니다 < <code>customRef in /code>를 사용하여 새로운 접근 방식을 구현합니다. 여기서는 자세히 쓰지 않겠습니다. 각 코드 줄 바로 위에 주석을 추가합니다. 나는 내 친구가 당신을 이해할 것이라고 믿습니다. 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

Using

rrreeethrottle

🎜🎜우리는 여전히 똑같습니다. 먼저 일반적인 포장 내용을 살펴보세요. 🎜🎜🎜공통 패키지-1🎜🎜🎜코드 🎜rrreee🎜사용 🎜rrreee🎜🎜공통 패키지-2🎜🎜🎜코드 🎜rrreee🎜사용 🎜rrreee🎜🎜새 패키지🎜🎜🎜Throt 패키지에 트링 및 흔들림 방지 기능이 있어 많이 사용 동일합니다. 🎜🎜Code🎜rrreee🎜Using🎜rrreee🎜🎜Summary🎜🎜🎜🎜위는 Vue 3의 궁극적인 손떨림 방지/스로틀(흔들림 방지/스로틀의 일반적인 방법 포함)입니다. 전체 내용에 부족한 점이 있거나 더 나은 방법이나 다른 독특한 통찰력이 있으면 언제든지 댓글 + 비공개 메시지를 보내주세요. 🎜🎜🎜물론이죠, 친구여, 당신은 또 다른 비법을 배웠습니다. 좋아요 + 팔로우 + 댓글을 달 수 있습니다. 🎜🎜이 글이 이 글을 읽고 있는 친구들에게 도움이 되었으면 좋겠습니다. 🎜🎜vue 2에서 동일한 솔루션을 구현하는 방법을 알고 싶은 친구는 여기를 클릭할 수 있습니다. 🎜 Vue 2에서 CustomRef 메서드 흔들림 방지/조절을 구현하세요🎜🎜🎜(동영상 공유 학습: 🎜vuejs 입문) tutorial🎜 ,🎜기본 프로그래밍 영상🎜)🎜

위 내용은 Vue3의 궁극적인 흔들림 방지/스로틀링에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!