Vue最新の手ぶれ対策（必見編）

関数の手ぶれ防止（debounce）：イベントが継続してトリガされた時、一定期間内にイベントが再起動されなくなり、イベント処理関数は一回だけ実行されます。設定された時間が来る前に、もう一度イベントがトリガされたら、再度遅延を開始します。クリを挙げて、scroll事件を継続的にトリガする時、handle関数を実行しないで、1000ミリ秒以内にscroll事件を触発しない時、やっと延長してscroll事件を触発します。
関数・スロットル：イベントを継続的にトリガすると、一定期間に一度だけイベント処理関数を呼び出すことができます。節流は通俗的に説明します。例えば、蛇口を放水して、バルブを開けたら、水がジャージャーと下に流れて、勤倹節約の優れた伝統的な美徳を持っています。蛇口を少し閉めます。できれば、私達の心の中で一定の規則に従って、ある時間の間に一滴ずつ下に垂らしてください。クリを挙げて、scroll事件を継続的にトリガする時、直ちにhandle関数を実行しないで、1000ミリ秒ごとにやっと一回のhandle関数を実行することができます。
手ぶれ防止例:

<script>
const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()
export default {
methods：{
fn() {
   delay(() => {
    //    
   }, 500)
}
}
}
</script>

ストリームの例:

var throttle = function(func, delay) {      
  var timer = null;      
  return function() {        
    var context = this;        
    var args = arguments;        
    if (!timer) {          
      timer = setTimeout(function() {            
        func.apply(context, args);            
        timer = null;          
      }, delay);        
    }      
  }    
}    
function handle() {      
  console.log(Math.random());    
}    
window.addEventListener('scroll', throttle(handle, 1000));

以上のこのVue最新の手ぶれ対策（必見編）は小編が皆さんに提供した内容の全部です。参考にしていただければと思います。どうぞよろしくお願いします。