手振れ防止とスロットル(vue-カスタムコマンド)

2650 ワード

vue.js html javascript

手振れ防止とスロットル(vue-カスタムコマンド)
振れを防ぐ

は、イベントがトリガされた後、一時的に再トリガされない場合に実行すると説明しています.

v-anti Shake
//実現

Vue.directive('antiShake', {
  //               (        ，           )。
  /**
  * el         ，         DOM 。
  * binding     ，      
  */
  
  inserted: function(el, binding) {
    const { callback, time } = binding.value
    el.callback = callback
    el.time = time
    el.timeCall = null
    el.addEventListener('click', () => {
      clearTimeout(el.timeCall)
      el.timeCall = setTimeout(() => {
        el.callback()
      }, el.time || 500)
    })
  },
  //       VNode      
  update: function(el, binding) {
    console.log('update')
    const { callback, time } = binding.value
    el.callback = callback
    el.time = time
  },
})

コア原理

     const { callback, time } = binding.value
    el.callback = callback
    el.time = time
    el.timeCall = null
    el.addEventListener('click', () => {
      clearTimeout(el.timeCall)
      el.timeCall = setTimeout(() => {
        el.callback()
      }, el.time || 500)
    })

は、タイマーsetTimeout遅延によってclickフィードバックを実行し、el.time|500時間以内に再度トリガすると、clearTimeout(el.timeCall)がタイマーをオフにし、再度再延長する

el.calback=calbackとel.time=time=timeをelに掛けるのは、v-anti Shakeバインディングの値が更新された後、イベントトリガが更新されたcalback

のためです.

 update: function(el, binding) {
    console.log('update')
    const { callback, time } = binding.value
    el.callback = callback
    el.time = time
  },

使用

コマンドの値testClickは、深いwatchをしていません.オブジェクト全体の変化だけが、コマンドのudateフック関数

をトリガします.

 
 
 // testClick
  testClick: {
     time: 1000,
     callback: () => {
        console.log(1111)
        console.log(this.test)
      }
  }

流れをよくする

しばらくの間に最初のトリガが発生したら、直ちに実行します.この時、期間内に再度トリガします.実行しません.

//実現

Vue.directive('throttling', {
  //               (        ，           )。
  inserted: function(el, binding) {
    const { callback, time } = binding.value
    el.callback = callback
    el.time = time
    el.addEventListener('click', () => {
      const nowTime = new Date().getTime()
      if (!el.preTime || nowTime - el.preTime > el.time) {
        el.preTime = nowTime
        el.callback()
      }
    })
  },
  update: function(el, binding) {
    console.log('update')
    const { callback, time } = binding.value
    el.callback = callback
    el.time = time
  }
})

el.preTimeは、前回のトリガイベントを記録し、その都度、nowTime(現在の時間)とel.preTimeの差が指定された時間帯より大きいかどうかを比較することをトリガする.

ページをめくるプラグインturn.js