マイクロチャネルアプレットの安定化機能とスロットル機能の使用

手ぶれ補正機能やスロットルの機能は、ありふれた問題です。どちらの方法は、JSのパフォーマンスを最適化することができます。一部の人々は二つの概念を混乱させる可能性があります。だから、私自身の理解では、これら二つの概念の意味を説明します。そして、アプレットに例示したこれらの2つの方法を使用して。

機能画像安定化：英語デバウンスリバウンド防止手段は、一般的に再トリガを防止するために参照します。

だから、手ぶれ補正機能は、本当の意味は次のとおりです。ディレイ機能の実行。最後のトリガデバウンス機能、setTimeoutメソッドの定義だけが、到着時間が再び手ぶれ補正機能を実行するために必要な場合にのみ、どのくらいのデバウンス機能どんなにがトリガされていること。

使用：入力整合の内容を表示、入力するために使用される入力フレーム。

スロットルスロットルバルブ英語の意味：スロットル機能。手段を保存すると、実質的にトリガ周波数であります

その後、スロットル機能は、本当の意味は次のとおりです。単位時間n秒ごとに、機能がトリガされ、関係なくトリガが行われていない回数n秒後に実行されません。次の単位時間n秒、トリガー機能までと関係なく実行されていない回数n秒以内にこの機能を実行しません。

用途：など、ページのスクロールやウィンドウのサイズ変更をスクロールする、または繰り返しボタンのクリックを防止するために使用されます

のみ周波数制御機能がトリガされていない場合、実際には、これら二つの概念を区別します。私は2つの機能がトリガの繰り返しを防止する機能を実現することだと思います。しかし、画像安定化機能は、N秒の遅延の後に実行され、スロットル機能は直ちに直ちにn秒後に、実行が実行されます。

アプレット、手ぶれ補正機能で、使用を絞る機能：

通常、一般的なjsの中の2つの方法でパッケージ：

tool.js

/*函数节流*/
function throttle(fn, interval) {
  var enterTime = 0;//触发的时间
  var gapTime = interval || 300 ;//间隔时间，如果interval不传，则默认300ms
  return function() {
    var context = this;
    var backTime = new Date();//第一次函数return即触发的时间
    if (backTime - enterTime > gapTime) {
      fn.call(context,arguments);
      enterTime = backTime;//赋值给第一次触发的时间，这样就保存了第二次触发的时间
    }
  };
}

/*函数防抖*/
function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms
  return function() {
    clearTimeout(timer);
    var context = this;
    var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
    timer = setTimeout(function() {
      fn.call(context,args);
    }, gapTime);
  };
}

export default {
  throttle,
  debounce
};

使用します。

import tool from "../../static/js/tool.js";
Page({
   data:{
    win_scrollTop:0
   },
   onPageScroll: tool.throttle(function(msg){
      this.setData({
        win_scrollTop: msg[0].scrollTop
      });
   }),
   gotoUnlock: tool.debounce(function() {
      this.saveUserInfo();
   }),
   saveUserInfo:function(){
      console.log(111)
   }
})

上記の二つの方法はただLiteは、いくつかの例は、再最適化を経験した後、考慮されていないがあるかもしれません。

説明スロットリング機能：

（1）最初の実行は、確かに機能を実行することが可能です。

（2）ときにn秒時間間隔は、第一セット及び第二の間隔よりも小さい第2のトリガは、実行されません。第三の後、4又はトリガは実行しません。

（3）一度だけn秒後まで、そして、再び最初のトリガの関数です。

手ブレ補正機能の説明：

（1）初めてトリガ機能は、タイマを定義します。n秒後に実行。

（2）時間の関数と2番目のショット、クロージャの特性、およびこの時間はタイマーは、あなたが最初のトリガータイマーを識別することであったので。その後のsetTimeoutの最初の直接の除去は、これはsetTimeoutを内部の内容は実行されません初めてです。そして第二の時間のsetTimeoutを定義します。

（3）第二の工程は、次に、透明になるまで繰り返され、提供されています。機能がトリガされるまで、最後の時間は、タイマは、最後に定義され、nは間隔秒実行されています。

（4）タイマ機能とトリガーを実行しなかった最終のであれば、第3工程を繰り返します。だけではなく、何秒間隔、その後、実行集合時間遅延機能の実行に対応する間隔時間。

ここでは、これらの2つの方法の違いは非常に明確です。この関数はスロットルトリガー周波数の機能を削減することである、と手ブレ補正機能は、機能の実装、およびトリガは、最後の時間を実行回数に関係なく遅延させることです。

マイクロチャネルアプレットの安定化機能とスロットル機能の使用

おすすめ