日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 Vue 正文

在Vue中使用防抖與節流,及this指向的問題_vue.js

作者：IMP_L ? 更新時間： 2022-04-06 Vue

使用防抖與節流,及this指向問題

最近項目中遇到了防抖與節流問題，搜索了很多文章都有this指向的問題，最后不得不采取一種很low的方法

data中定義isFirst為1

if (this.isFirst < 2){
? ? this.isFirst = 2
? ? setTimeout(() => {
? ? ? ? this.isFirst = 1
? ? ? }, 1000)
? }

這樣就形成了假的節流

但是我們怎么能屈服于這種寫法

繼續探索vue項目中用閉包的方式防抖節流

一頓操作后

?const delay = (function () {
? ? let timeout
? ? return (callback, ms) => {
? ? ? if (timeout) clearTimeout(timeout)
? ? ? let callNow = !timeout
? ? ? timeout = setTimeout(() => {
? ? ? ? timeout = undefined
? ? ? }, ms)
? ? ? if (callNow) callback.apply(this, [callback, ms])
? ? }
? })()
?export default {
?? ?methods: {
?? ??? ?delay(() => {
? ? ? ? ? // do something
? ? ? ?}, 1000)
?? ?}
}

用了立即執行的函數方法，就能夠獲取到全局的this了?

使用防抖函數所遇見的坑

以前的防抖和節流都是在js中直接書寫，后使用vue進行組件化開發之后，有些地方需要注意。

正常寫法

? ? function debounce(func, delay) {
? ? ? let timeout
? ? ? return function () {
? ? ? ? let context = this;
? ? ? ? let args = arguments;
? ? ? ? if (timeout) {
? ? ? ? ? clearTimeout(timeout)
? ? ? ? }
? ? ? ? timeout = setTimeout(() => {
? ? ? ? ? func.apply(context, args)
? ? ? ? }, delay)
? ? ? }
? ? }

使用

? ? function change(volume, data) {
? ? ? debounce(() => {
? ? ? ? console.log('change', volume, data);
? ? ? }, 500)
? ? }

Vue中寫法使用

注意： Vue中使用時，需要定義timeout，同時在防抖函數中，this的指向發生了變化，需要在return之前獲取vue實例。這個時候，你直接使用，還是不行的，只要debug就會發現debounce返回的func沒有進去，需要手動執行一下(添加括號)。

? data() {
? ? return {
? ? ? timeout: null
? ? }
? }
? ? change(volume, data) {
? ? ? this.debounce(() => {
? ? ? ? console.log('change', volume, data)
? ? ? }, 500)
? ? },
? ? debounce(func, delay) {
? ? ? let context = this // this指向發生變化，需要提出來
? ? ? let args = arguments
? ? ? return function () {
? ? ? ? if (context.timeout) {
? ? ? ? ? clearTimeout(context.timeout)
? ? ? ? }
? ? ? ? context.timeout = setTimeout(() => {
? ? ? ? ? func.apply(context, args)
? ? ? ? }, delay)
? ? ? }()// 注意:我加了()
? ? }

Vue中的watch的防抖簡寫

? ? watchObj: {
? ? ? handler(val) {
? ? ? ? let _this = this
? ? ? ? clearTimeout(this.timeout)
? ? ? ? this.timeout = setTimeout(() => {
? ? ? ? ? _this.handlerData(val)
? ? ? ? }, 500)
? ? ? }
? ? }

原文鏈接：https://blog.csdn.net/DemonLhl/article/details/106074742

欄目分類
最近更新