欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中使用閉包(防抖和節(jié)流)失效問(wèn)題

 更新時(shí)間:2023年04月30日 08:57:54   作者:凡小多  
本文主要介紹了vue中使用閉包(防抖和節(jié)流)失效問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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)文章

  • vue刷新和tab切換實(shí)例

    vue刷新和tab切換實(shí)例

    下面小編就為大家分享一篇vue刷新和tab切換實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • 基于Vue3實(shí)現(xiàn)無(wú)限滾動(dòng)組件的示例代碼

    基于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)式

    淺析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-08
  • vue.js 2.0實(shí)現(xiàn)簡(jiǎn)單分頁(yè)效果

    vue.js 2.0實(shí)現(xiàn)簡(jiǎn)單分頁(yè)效果

    這篇文章主要為大家詳細(xì)介紹了vue.js 2.0實(shí)現(xiàn)簡(jiǎn)單分頁(yè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • Vue3利用組合式函數(shù)和Shared Worker實(shí)現(xiàn)后臺(tái)分片上傳

    Vue3利用組合式函數(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)于Vue單頁(yè)面骨架屏實(shí)踐的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。
    2017-12-12
  • vue-cli初始化項(xiàng)目中使用less的方法

    vue-cli初始化項(xiàng)目中使用less的方法

    vue-cli 是 vue.js 的腳手架工具,可以幫助我們編寫(xiě)基礎(chǔ)代碼、快速搭建開(kāi)發(fā)環(huán)境。下面這篇文章主要給大家介紹了關(guān)于vue-cli初始化項(xiàng)目中使用less的相關(guān)資料,需要的朋友可以參考借鑒,下面隨著小編來(lái)一起看看吧
    2018-08-08
  • 利用vuex-persistedstate將vuex本地存儲(chǔ)實(shí)現(xiàn)

    利用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í)例講解

    卸載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

    這篇文章主要介紹了基于Vue.js的移動(dòng)組件庫(kù)cube-ui,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12

最新評(píng)論