デザインパターン（1）：機能のみを実行する（つづき）

アウトライン

最近、常にいくつかの大きなを考えますプロジェクトやっ最近の関連アプリケーションのデザインパターンの問題を、私は今後の参考のために彼自身のレコードが開発するときだと思う、我々はそれが他の人に便利であると考えています。

戦争の閉鎖

パートは、もともと適切に書かれた、それは論理的で非常に明確なようだが、実際には巨大な穴を見つけるために使い切ります。つまり、変数の閉鎖は共有されます！！！

// utils.js
export function runOnce(func) {
  let runOnce = true;
  return function(params) {
    if (runOnce) {
      func.apply(this, params);
      runOnce = false;
    }
  };
}

RUNONCE変数のRUNONCE機能の上に、すべての関数呼び出しは、共有されます。これはRUNONCEが複数の場所で使用されている場合、それは一度だけ実行されることを意味します。例としては、次のとおりです：

// utils.js
export function runOnce(func) {
  let runOnce = true;
  return function(params) {
    if (runOnce) {
      func.apply(this, params);
      runOnce = false;
    }
  };
}

//example.vue
import { runOnce } from '@/utils';
<script>
export default {
  methods: {
    func1RunOnce: runOnce(function h() {
      console.log('hello world1', this);
    }),
    func2RunOnce: runOnce(function h() {
      console.log('hello world2', this);
    }),
  },
};
</script>

上記の例では、我々の意図はfunc1RunOnceとfunc2RunOnceそれぞれは、一度実行後に実行されないようにすることです。しかし、現実はfunc1RunOnceの実装が閉鎖RUNONCE割り当てパッケージを入れた後、実際func2RunOnce、ので、虚偽である、ということです、それは実行しません一度！！！

だから我々は最終的に袋小路に入って、この道はどこにもつながりません。（ケース変数の話題一時閉鎖は辞書です）

スロットルの原因

実際には、イベント全体の原因は、スロットルの使用の模倣であります：

//example.vue
import { throttle } from 'debounce-throttle';
<script>
export default {
  methods: {
    funcThrottle: throttle(function h() {
      console.log('hello world1', this);
    }, 300),
  },
};

funcThrottle機能上記300msの内の一度だけ。では、なぜそれが通常実行することができますか？

ソースコードを見て、私は次のような理由を見つけました：

タイムアウトによって生成された各可変絞りtimeoutIDはを使用して、変わります。
300msのが非常に短い、300で行わ同じ機能を使用して2つの異なるスロットル、が存在するであろう。

学んだこと

さて、関数の実行を実現するためには、いずれかのクロージャと+辞書、プラス正直変数または例VUEマーカー、最もエレガントな方法ではありません。これは、変数のマークを示唆しました。
注意閉鎖。