vue中使用閉包(防抖和節(jié)流)失效問(wèn)題
1. 出現(xiàn)問(wèn)題
防抖/節(jié)流使用無(wú)效,(例如防抖,按鈕點(diǎn)擊多次依舊執(zhí)行多次)
----> 查看是閉包無(wú)效,定義的局部變量依舊為初值
----> 沒(méi)有相應(yīng)清除定時(shí)器
? <el-button @click="btn1">按 鈕1</el-button> ? <el-button @click="debounce(btn2)">按 鈕2</el-button> </template> <script setup lang="ts"> // 以下方法調(diào)用不生效 const btn1 = () => { ? debounce(() => { ? ? console.log('點(diǎn)擊了') ? }, 1000)() } const btn2 = () => { ? console.log('點(diǎn)擊了'); } </script>
2. 問(wèn)題原因
直接調(diào)用了防抖函數(shù)
原因:這個(gè)和vue的事件綁定原理有關(guān)。如果直接在函數(shù)體內(nèi)部使用的話,結(jié)果就是,一個(gè)匿名的立即執(zhí)行函數(shù)來(lái)進(jìn)行執(zhí)行。由于每次觸發(fā)點(diǎn)擊事件都會(huì)返回一個(gè)新的匿名函數(shù), 就會(huì)生成一個(gè)新的函數(shù)執(zhí)行期上下文(稱(chēng)之為執(zhí)行棧),所以就會(huì)防抖/節(jié)流就會(huì)失效
3. 解決辦法
<template> ? <el-button @click="btn">按 鈕1</el-button> </template> <script setup lang="ts"> const btn = debounce(function() { ? console.log('點(diǎn)擊了'); },500) </script>
4. 防抖節(jié)流函數(shù)
type DebouncedFn<T extends (...args: any[]) => any> = (this: ThisParameterType<T>, ...args: Parameters<T>) => void; type ThrottledFn<T extends (...args: any[]) => any> = (this: ThisParameterType<T>, ...args: Parameters<T>) => void; function debounce<T extends (...args: any[]) => any>(fn: T, delay: number, immediate = false): DebouncedFn<T> { ? let timer: number | null = null; ? return function(this: ThisParameterType<T>, ...args: Parameters<T>) { ? ? // if (timer !== null) clearTimeout(timer); ? ? timer && clearTimeout(timer) ? ? if (immediate) { ? ? ? const callNow = !timer; ? ? ? timer = setTimeout(() => { ? ? ? ? timer = null; ? ? ? }, delay); ? ? ? callNow && fn.apply(this, args); ? ? } else { ? ? ? timer = setTimeout(() => { ? ? ? ? fn.apply(this, args); ? ? ? }, delay); ? ? } ? }; } function throttle<T extends (...args: any[]) => any>(fn: T, delay: number, immediate = false): ThrottledFn<T> { ? let lastCall = 0; ? return function(this: ThisParameterType<T>, ...args: Parameters<T>) { ? ? const now = new Date().getTime(); ? ? // immediate 不為 true 時(shí), 不立即執(zhí)行 ? ? lastCall === 0 && !immediate && (lastCall = now) ? ? const diff = now - lastCall; ? ? if (diff >= delay) { ? ? ? lastCall = now; ? ? ? fn.apply(this, args); ? ? } ? }; } export { ? debounce, ? throttle }
到此這篇關(guān)于vue中使用閉包(防抖和節(jié)流)失效問(wèn)題的文章就介紹到這了,更多相關(guān)vue 閉包失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于Vue3實(shí)現(xiàn)無(wú)限滾動(dòng)組件的示例代碼
如果你在社交媒體上停留的時(shí)間過(guò)長(zhǎng),那么,你所在的網(wǎng)站很可能正在使用無(wú)限滾動(dòng)組件。這篇文章教你利用Vue3實(shí)現(xiàn)無(wú)限滾動(dòng)組件,感興趣的可以參考一下2022-09-09淺析Proxy如何實(shí)現(xiàn)Vue響應(yīng)式
這篇文章主要是來(lái)和大家探討一下,Vue的響應(yīng)式系統(tǒng)僅僅是一個(gè)Proxy嗎,本文將圍繞此問(wèn)題探索一下Proxy是如何實(shí)現(xiàn)Vue響應(yīng)式的,感興趣的小伙伴可以了解一下2023-08-08vue.js 2.0實(shí)現(xiàn)簡(jiǎn)單分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue.js 2.0實(shí)現(xiàn)簡(jiǎn)單分頁(yè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07Vue3利用組合式函數(shù)和Shared Worker實(shí)現(xiàn)后臺(tái)分片上傳
這篇文章主要為大家詳細(xì)介紹了Vue3如何利用組合式函數(shù)和Shared Worker實(shí)現(xiàn)后臺(tái)分片上傳(帶哈希計(jì)算),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10關(guān)于Vue單頁(yè)面骨架屏實(shí)踐記錄
這篇文章主要給大家介紹了關(guān)于Vue單頁(yè)面骨架屏實(shí)踐的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-12-12利用vuex-persistedstate將vuex本地存儲(chǔ)實(shí)現(xiàn)
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲(chǔ)的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04卸載vue2.0并升級(jí)vue_cli3.0的實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于卸載vue2.0并升級(jí)vue_cli3.0的實(shí)例內(nèi)容,需要的朋友們可以學(xué)習(xí)參考下。2020-02-02淺談基于Vue.js的移動(dòng)組件庫(kù)cube-ui
這篇文章主要介紹了基于Vue.js的移動(dòng)組件庫(kù)cube-ui,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12