Anti shake and throttling in JS

What is anti shake? What is throttling? Let's study happily together.

First of all, what is anti shake: it means that events only happen once in a certain period of time. For example, if you click the button button, you will be single for 30 years and click countless times in one second, and it will only trigger once. For example, when you use onkeyUp on the page to monitor the user's input in the input box, if the user presses and holds a 6, the monitoring event will not be triggered all the time, which wastes part of the performance. Then we monitor in a certain event, that is to say, I'll see how many 6 you input in a second, which is much easier. ok, if the explanation is clear, then look at the code, which is clearer.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Anti shake</title>
</head>
<body>
  <button id="debounce">Anti shake, anti shake, anti shake</button>
  <script>
    window.onload = function () {
      let obtn = document.getElementById('debounce'); //Get button
    obtn.addEventListener('click',debounceHandle(debounce),false); //Listen to binding events
    }

    //Anti shake function
    function debounceHandle (fn) {
      let timer = null;
      return function () {
        clearTimeout(timer); //Clear timer if there are events
        timer = setTimeout(function(){ //If not, turn on the timer
          fn.call(this,arguments);
        },300)
      }
    }

    //Execution function
    function debounce() {
      console.log('Anti shake, anti shake, anti shake');
    }
  </script>
</body>
</html>

The above function only triggers one event in 300 milliseconds. Summary: anti shake means that when the task is triggered frequently, the task will be executed only when the interval of task triggering exceeds the specified interval.

Next, what is throttling? If there are any multiple pictures in a page, lazy loading technology may be used. Lazy loading is to monitor the position of the scroll bar. If the user is rolling all the time, event monitoring will be triggered all the time, which is also a waste of energy. Then throttling is to trigger an event within a certain time interval. If you don't talk much, look at the code first.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>throttle</title>
  <style>
    div {
      height: 5000px;
    }
  </style>
</head>
<body>
  <div>throttle,throttle,throttle</div>
  <script>
    window.onload = function () {
      window.addEventListener('scroll',throttleHandle(throttle),false); //Listen to binding events
    }

    //Throttling function
    function throttleHandle (fn) {
      let timer = null,
          booleanVal = true; // Declare a variable flag for judgment
      return function () {
          if (!booleanVal) {
            return 
          } //If the event is executing, return, changing the Boolean value to false
          booleanVal = false;
          //Event not executed, create event
          timer = setTimeout(function() {
            fn.apply(this,arguments);
            booleanVal = true; //Change the Boolean value back to
          },300)
      }
    }

    //Execution function
    function throttle() {
      var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollNum);
    }
  </script>
</body>
</html>

In this way, in some specific work scenarios, we can use anti shake and throttling to reduce unnecessary loss. Finally, the last sentence mentioned that unnecessary losses are caused, so what kind of losses are caused?

Keywords: Javascript

Added by irken on Sat, 07 Dec 2019 06:16:00 +0200

Programming VIP

Anti shake and throttling in JS

Popular Keywords