underscore function throttling
preface
Before talking about underscore function throttling, we should clarify the concept of function throttling. Function throttling is simply 'increasing revenue and reducing expenditure'. What does it mean? Is to reduce the frequency of a function call. Generally speaking, frequent operations on the dom will cause redrawing or rearrangement of the browser. At this time, we can use throttling. Don't let it operate the dom too fast, so that the page rendering will be more smooth.
Take a scenario: I have done this function by default for the movement and dragging of dom elements. For frequent dragging of dom elements, there will be great loss for some browsers with poor performance (that is, your IE). At this time, we can appropriately reduce the call frequency of this event. Of course, the frequency of calls should also have an appropriate threshold. Otherwise, it will lead to unexpected problems...
underscore function throttle
The frequency of function call mentioned above is the call time. Therefore, in underscore, the frequency of function call is based on the timer and time difference. Also, the throttle function receives three parameters. I'll talk about the last parameter at the end.
Let's look at the source code:
var now = Date.now || function() {
return new Date().getTime();
};
var throttle = function(func, wait, options) {
var timeout, context, args, result;
var previous = 0;
if (!options) options = {};
var later = function() {
previous = options.leading === false ? 0 : now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
var throttled = function() {
var now = this.now();
if (!previous && options.leading === false) previous = now;
// console.log(previous)
var remaining = wait - (now - previous);
// console.log(remaining);
// console.log(remaining)
context = this;
args = arguments;
// Remaining > wait indicates that the client system time has been adjusted
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
// timeout = null is set to null, not only to prevent memory leakage, but also after clearTimeout(timeout), the timeout value will not be cleared. If it is not set to null, it cannot be used according to! Timeout sets the next timeout
}
previous = now;
result = func.apply(context, args);
// console.log(result)
if (!timeout) context = args = null; // I don't understand here. Isn't timeout assigned null
// context = args = null; The reference value is empty to prevent memory leakage.
} else if (!timeout && options.trailing !== false) {
// console.log(remaining);
timeout = setTimeout(later, remaining);
// console.log(later, remaining)
}
return result;
};
throttled.cancel = function() {
clearTimeout(timeout);
previous = 0;
timeout = context = args = null;
};
return throttled;
};
var func = function () {
console.log('wangdaye')
}
window.onscroll = throttle(func, 1000);
I analyze it from my own point of view: first scroll into the throttle function to carry two parameters, define the variables in the function first, and directly say the throttled function. First, we need to get the current time, then we calculate the time difference. Of course, the first call we definitely do not want to delay loading, so variable remaining must be negative value, get the latest timestamp, and then call the function. When calling continuously, the variable remaining is a positive value, and then the timer delays calling the later method to refresh the timestamp, and the timeout is null. When calling again after waiting for one second, the remaining value is negative and there is already a timeout, so the last timer is cleared and the timeout is null.
Let me talk about the third parameter. The third parameter has two calling methods. The first is {leading: false}. When the passing method is {leading: false}, the callback before the start of scroll will be ignored. The second method is {trailing: false}. When the delivery method is {trailing: false}, the end of scroll will be ignored.
Finally, I hope I can debugger or console Log, I believe I will understand more about function throttling.
That's it....