Use of the micro-channel applet stabilization function and a throttle function

Anti-shake function and a function of the throttle are commonplace problem. Both methods can optimize the performance of js. Some people may confuse the two concepts. So, in my own understanding, to explain the meaning of these two concepts. And using these two methods exemplified in the applet.

Function Image Stabilization : English debounce anti-rebound means, generally refers to prevent re-triggering.

So, anti-shake function, the real meaning is: delay function execution . That no matter how long debounce function is triggered only when the last trigger debounce function, only the definition of setTimeout, inter-arrival time again required to perform image stabilization function.

Use: input frame when used for input, displaying the contents of the input matching.

Function throttle: throttle throttle valve English meaning. Saving means is substantially frequency triggering

Then, the throttle function, the real meaning is: per unit time n seconds, the function is triggered and executed after n seconds no matter how many times the trigger is not carried out. Until the next unit time n seconds, the trigger function and execute this function within n seconds no matter how many times are not executed.

Use: used to scroll the page scroll or window resize, or to prevent repeat button clicks, etc.

In fact, if only the frequency control function is not triggered distinguish between these two concepts. I think the two functions to achieve the function of preventing repeat triggered. However, image stabilization function is executed after the delay of n seconds; the throttle function is immediately executed, executed immediately after n seconds.

In the applet, the anti-shake function, the function of throttling use:

Usually packaged in these two methods in common js:

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
};

use:

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)
   }
})

The above two methods just Lite, there may be some cases not taken into account, after experiencing a re-optimization.

Description throttling function:

(1) The first execution, is certainly capable of performing the function.

(2) when n seconds and then a second trigger, when the time interval is less than the first set and the second interval, will not be executed. After the third, fourth or trigger does not perform.

(3) and only once until n seconds after, and is a function of the first trigger again.

Anti-shake function description:

(1) The first time the trigger function defines a timer. Performed after n seconds.

(2) a function of time and then the second shot, because the characteristics of the closures, and this time the timer has been to identify the timer when you first triggered. Then the first direct removal of setTimeout, this is the first time the contents inside setTimeout will not be executed. And then define the second time setTimeout.

(3) The second step is then repeated until clear, and has been provided. The last time until the function is triggered, a timer is defined last, and the second execution interval n.

(4) If in the final did not perform a timer function and triggers, then repeated the third step. Time interval corresponding to set time delay function execution only, and not how many seconds interval and then executed.

Here, the difference between these two methods is quite clear. Function is to reduce the function of the throttle trigger frequency, and anti-shake function is to delay the implementation of a function, and no matter how many times the trigger only perform the last time.