background

In coding today, I made a search box, and it was this search box that made my background friends and I directly change from ferromagnetic to plastic brothers. So what happened? In fact, very simple, in fact very helpless, is that I use the king’s hand speed to his interface access collapse!

When we in the development of the usual, there will be a lot of scenario will often trigger events, such as a search box in real time request, onmousemove, resize, onscroll, etc., in some cases, we can’t or don’t want to trigger events frequently, do how? This time should use function tremble and function throttling!

Function debounce

What is anti-shake? Trigger the same event several times in a short period of time, only one last time, or only at the beginning of the execution, not in between. For example: you go to take a bus, non-stop people on the ground, the continuous process of the master driver will not drive, only when the last person on the bus, the old driver will drive! Gnome male – “! Let’s take the example of repeatedly triggering the onMousemove event to make the number +1. The code is as follows:

  • Without the use of anti-vibration and throttling, the number will grow like an epileptic
Var XCD = document.getelementById ('xcd'), count = 1; // The number of operations to be performed +1function doSomething() { xcd.innerHTML = count++; }; // Trigger the onMousemove event. Normally, xcd.onmousemove =doSomething;
Copy the code

  • Use the anti – shake green base version
// Green Basic:function debounce(doSomething,wait){ var timeout; // An external variable is required, so closures are used to enhance encapsulationreturn function(){
        var _this = this,
            _arguments = arguments;//arguments中存着e
        clearTimeout(timeout);
        timeout = setTimeout(function() {doSomething.apply(_this,_arguments);   
        },wait); }} // Trigger the onMousemove event xcd.onmousemove = debounce(doSomething,1000);
Copy the code

  • Use the Anti-shake now version
// Execute now versionfunction debounce(doSomething,wait,isImmediate){
    var timeout;
    return function(){
        var _this = this,
            _arguments = arguments;
        clearTimeout(timeout);
        if(isImmediate){ var isTrigger = ! timeout; timeout =setTimeout(function(){
                timeout = null;
            }, wait)
            isTrigger&&doSomething.apply(_this,_arguments);
        }else{
            timeout = setTimeout(function() {doSomething.apply(_this,_arguments);   
            },wait); XCD. Onmousemove = debounce(doSomething,1000,true);
Copy the code

Function throttle

What is throttling? Throttling is a function that continuously triggers events during the execution of a function at a certain time interval. Throttling dilutes the frequency of your execution, such as executing a function once every 1 second, regardless of how many events are triggered within that 1 second.

For example: you drink a lot of water every day, but you don’t have to go to the toilet every time you take a sip of water. If that’s the case, I suggest you go to the hospital. Drink water, drink water, go to the bathroom! Drink water, drink water, go to the bathroom! It fires all the time, but only once in a while. This is function throttling!

  • Use the timestamp version of the throttle
// The green base version of the timestamp versionfunction throttle(doSomething,wait){
    var _this,
        _arguments,
        initTime = 0;
    return function(){ var now = +new Date(); // Convert new date() to timestamp _this = this; _arguments = arguments;if(now - initTime>wait) {doSomething.apply(_this,_arguments); initTime = now; XCD. Onmousemove = throttle(doSomething,1000);
Copy the code

  • Use throttling timer version
// Green Base timerfunction throttle(doSomething,wait){
    var timeout;
    return function(){
        var _this = this;
            _arguments = arguments;
        if(! timeout){ timeout =setTimeout(function(){
                timeout = null;
                doSomething.apply(_this,_arguments);
            },wait); }; }} // Trigger onMousemove xcd.onmousemove = throttle(doSomething,1000);
Copy the code

Of course, there may be BT products that ask you, can you do it immediately, do it at regular intervals, and then do it again? Now it’s time to play B. It’s a must for a front end like me. Just put the two together. What’s your favorite double fix

  • Use throttling double sword edition
// Throttling double sword versionfunction throttle(doSomething, wait) {
    var timeout, _this, _arguments,
        previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        doSomething.apply(_this, _arguments)
    };
    var throttled = function() { var now = +new Date(); // Next timedoThe remaining time of Something var remaining =wait- (now - previous), _this = this; _arguments = arguments; // If there is no time leftif (remaining <= 0) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            doSomething.apply(_this, _arguments);
        } else if(! timeout) { timeout =setTimeout(later, remaining); }};returnthrottled; } // Trigger onmousemove xcd.onmousemove = throttle(doSomething,1000);
Copy the code