Shulou(Shulou.com)06/01 Report--

How to analyze the JS function of anti-shake and throttling, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Throttling is essentially: if you keep triggering events, only execute them once at regular intervals.

According to this requirement, we can achieve throttling through timestamp:

/ / the first implementation, function throttle (func, wait) {

Var context, args

Var previous = 0

Return function () {

Var now = + new Date ()

Context = this

Args = arguments

If (now-previous > wait) {

Func.apply (context, args)

Previous = now

}

}} / / add the way to obtain the timestamp / / new Date (). GetTime () / / Date.parse (new Date ()) / / + new Date () / / Date.now () / / determine whether the function is executed by determining whether the timestamp of the second click time and the last click time is greater than the passed time

Another way of implementation is to determine whether the function is executed by judging the existence of the timer.

/ / the second implementation method function throttle (func, wait) {

Var timeout

Var previous = 0

Return function () {

Context = this

Args = arguments

If (! timeout) {

Timeout = setTimeout (function () {

Timeout = null

Func.apply (context, args)

}, wait)

}

}} / /

If you look at the code of the above two implementations, you can find that:

The event of mode 1 will be executed immediately, because getting the current timestamp will definitely be greater than the time passed in wait, and the event of mode 2 will be executed for the first time after n seconds, and because the timer is set, it will be executed after wait seconds.

If we execute several times in a row, the first way will not execute the function after the end of the event, and the second will execute again after wait seconds after the end.

How to neutralize the two ways?

/ / the third way, function throttle (func, wait, options) {

Var timeout, context, args, result

Var previous = 0

If (! options) options = {}

Var later = function () {

Previous = options.leading = = false? 0: new Date () .getTime ()

Timeout = null

Func.apply (context, args)

If (! timeout) context = args = null

}

Var throttled = function () {

Var now = new Date () .getTime ()

If (! previous & & options.leading = false) previous = now

Var remaining = wait-(now-previous)

Context = this

Args = arguments

If (remaining wait) {

If (timeout) {

ClearTimeout (timeout)

Timeout = null

}

Previous = now

Func.apply (context, args)

If (! timeout) context = args = null

} else if (! timeout & & options.trailing! = = false) {

Timeout = setTimeout (later, remaining)

}

}

Return throttled;} / / leading:false means to disable the first execution

/ / trailing: false means to disable the callback triggered by stop

/ / that is leading:false and trailing: false cannot be set at the same time. Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.