Vue でのアンチシェイクとスロットリング

---

序文

みなさん、こんにちは。今日は、Vue のアンチシェイクとスロットリングについてお話しします。

---

1.手ぶれ防止とは？

アンチシェイク (デバウンス): 一定時間内に、アクションが継続的かつ頻繁にトリガーされた場合、アクションが 1 回だけ実行されることを意味します。つまり、アクションは、アクション後 n ミリ秒後に実行されます。このアクションを n ミリ秒以内に呼び出すと実行時間が再計算されるため、短時間の連続アクションは 1 回だけトリガーされます。

2. スロットルとは何ですか?

関数のスロットリング (throttle) とは、一定時間内に実行される操作が 1 回だけ実行される、つまり実行サイクルがあらかじめ設定されていることを意味し、アクションが呼び出される時間が実行サイクル以上の場合、アクションが実行され、次の新しいサイクルに入ります. より鮮明な例として、水がしずくの形で流れ出るまで蛇口を締めると、1回ごとに水滴が流れます.その間。

3.実現

1. インストール

1. ヤーン・アド・ロダッシュ

2. npm i lodash --save

2. ロダッシュのインポート

<template>
  <button @click="btnClick">节流</button>
  <button @click="btnClick2">防抖</button>
</template>
 
<script>
import _ from "lodash";
 
export default {
    
    
  name: "",
  setup() {
    
    
    // 节流
    const btnClick = _.debounce(function() {
    
    
      // ....
      console.log('节流');
    }, 2000);
    // 防抖
    const btnClick2 = _.throttle(function() {
    
    
      // ....
      console.log('防抖');
    }, 2000);
    return {
    
    
      btnClick,
      btnClick2,
    };
  },
};
</script>
 
<style scoped></style>
 

このアプローチは、再利用可能なコンポーネントがすべて同じデバウンス機能を共有するため、問題になる可能性があります。コンポーネント インスタンスを互いに独立させるために、このアンチシェイク機能をライフサイクル フックの作成に追加できます。

app.component('save-button', {
    
    
  created() {
    
    
    // 用 Lodash 的防抖函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    
    
    // 移除组件时，取消定时器
    this.debouncedClick.cancel()
  },
  methods: {
    
    
    click() {
    
    
      // ... 响应点击 ...
    }
  },
  template: `
    <button @click="debouncedClick">
      Save
    </button>
  `
})

要約する

以上がこの章の全内容です。お役に立てれば幸いです。