What is anti-shake and throttling in javascript

In JavaScript, anti-shake means that the function will only be executed once within n seconds after a high-frequency event is triggered. If the high-frequency event is triggered again within n seconds, the time will be recalculated; throttling means that when the high-frequency event continues When an event is triggered, the event processing function is guaranteed to be called only once within a certain period of time.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

1. Anti-shake

The function will only be executed once within n seconds after a high-frequency event is triggered. If the high-frequency event is triggered again within n seconds, Then recalculate the time

• Idea:
  Action binding event, the event is triggered after a certain period of time after the action occurs. During this period, if the action occurs again, wait again The event is triggered again after a certain period of time.

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout);
         // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { 
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内
        // 如果还有字符输入的话，就不会执行 fn 函数
          fn.apply(this, arguments);
          //因为sayHi函数是在全局中运行，this默认指向了window
          //所以要用apply将inp的this传入
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

For example, if you have a requirement that after the user enters a string of characters in the input box, an ajax request will be automatically sent. If anti-shaking is not done, the user will change the string every time. (Deleting characters or entering new characters) will send a request, but if anti-shake processing is performed, after the user enters a character, the string will not change after 0.5 seconds (this most likely means that the user has completed the string input). Then send a request. If the string is changed within 0.5 seconds (this has a high probability of indicating that the current string is not the final string to be entered by the user), the request will not be sent temporarily and the request will continue to be recalculated for 0.5 seconds until the user pauses for more than 0.5 seconds. , and then send the request.

2. Throttling

When events are continuously triggered, ensure that the event processing function is only called once within a certain period of time. Therefore, throttling will dilute the execution frequency of the function

• Idea:
  Action binding event, the event will be triggered after a period of time after the action occurs. During this period, if the action occurs again , the action is ignored and cannot be retriggered until the event is executed.

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次
          //循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

3. Combining application scenarios

debounce(anti-shake)

• Search Search Lenovo, when the user continues to enter values, anti-shake is used to save request resources.

• When window triggers resize, constantly adjusting the browser window size will continuously trigger this event. Use anti-shake to make it only trigger once

. throttle(throttle)

• Triggered by continuous mouse clicks, mousedown (triggered only once per unit time)

• Listen to scrolling events, such as whether to slide to the bottom and automatically load more, use throttle to judge

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of What is anti-shake and throttling in javascript. For more information, please follow other related articles on the PHP Chinese website!