Small micro-channel program: Jump prevent multiple clicks (throttle function)

JS image stabilization function and a throttle function

Issues into
Question 1: If you implement dom drop functionality, but when found to bind drag event whenever the elements a little bit will trigger a large number of mobile callback function, cause the browser to directly stuck, this time how
Question 2: If the button is bound to a post event form submission, but users sometimes in the case of poor network conditions cause multiple clicks a button to submit the form repeat, how to prevent multiple submissions of?

In response to the above scenario, there appeared two concepts throttle function and anti-shake function, in general:
These two methods are often executed on the timeline control function.

Function Image Stabilization (debounce)

The concept: a callback to be triggered in the event n seconds, and then, if this has been triggered in n seconds, then re-timing.
Examples of life: If someone in the elevator (the triggering event), and that the elevator will start (execute an event listener) after 10 seconds, then if someone into the elevator (to trigger the event again in 10 seconds), we We have to wait 10 seconds and then start (re-timing).

Throttling function (Throttle)

The concept: a specified unit of time, within this unit time, only one trigger event callback execution, if an event is triggered in the same unit of time several times, only once can take effect.
Examples of life: We know that the current way of saying that when continuous play more than 24 images in one second, the human eye will form a coherent vision of animation, so playing movies (previously, now I do not know) is the basic rate of 24 frames per second playback, why not 100 or more because of 24 times to meet the needs of human vision, 100 will become a waste of resources.

FIG analysis
assumptions, we observed a total time of 10 seconds, one second predetermined minimum interval of time as an event.
If the frequency of the triggering event is 0.5s / times, then the
function shown in image stabilization

Because after all, can not wait a second was triggered again, so in the end no one event is a success.
FIG throttling function

Because the control of up to once every second, the frequency of 0.5s / times, so there is an event every second void. The final control to 1s / sub
frequency if the triggering event is 2s / times, then the
function shown in image stabilization

Because the 2s / times greater than the minimum time has been specified, so every two seconds will trigger a timer.
FIG throttling function

Similarly, 2s / times greater than the minimum time requirements, so every time the trigger takes effect.
Scenarios
for anti-shake function, are the following scenarios:

Button to add image stabilization function to prevent multiple submissions form.
When the input box AJAX validation continuous input with image stabilization function effective in reducing the number of requests.
Determine whether the scroll bar to the bottom, anti-shake function scroll event +

Overall, the situation for many times the primary response to events

For throttling function, we have the following scenarios:

Game refresh rate
DOM element drag
Canvas Brush function

In general, suitable for mass events do trigger time-averaged distribution.

Anti-shake function:

function debounce(fn, wait) {
  var timer = null;
  return function () {
      var context = this
      var args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}
var fn = function () {
  console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次
setInterval(debounce(fn,2000),1000) // 不会触发一次（我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）

It returns a function, because the image stabilization function itself is more like a modified, so we did a curried function. Which also used the closure, the closure is a variable timer.

Throttle function

function throttle(fn, gapTime) {
  let _lastTime = null;
  return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn();
      _lastTime = _nowTime
    }
  }
}
let fn = ()=>{
  console.log('boom')
}
setInterval(throttle(fn,1000),10)

FIG throttling function is a simple implementation, the result is a hit one second boom

summary

And image stabilization function is a function of the throttle control on a time axis the number of performed functions. Image stabilization can be assimilated to continue on the passenger elevator, throttle slide can be seen as limiting the frequency of playing movies.

reference

Easy to understand JS throttle function and anti-shake function

Source

tomfriwel / MyWechatAppDemo of throttlepage

Author: tomfriwel
original address: micro-channel applet: prevent multiple clicks jump (Function restriction) - Tutorial - applet Community - micro letter applet - micro letter applet development community - a small program development forums - micro letter applet Union
statement: this article from the network, all belongs to the author, this column does not represent the point of view, have any questions please contact me, thank you!