Bluster explains throttling

concept

Throttling, as a common programming method in programming, is quite common in practical work development, such as rolling paging in mobile terminal.

We can think of throttling as a switch. When the condition is met, the switch is turned on for subsequent operations. When the condition is not met, the switch is turned off to terminate the current operation.

process

Understand it this way:

  1. Go to a public restroom
  2. If you find the bathroomThe doorIt’s closed, which means there’s someone in there, so weTermination ofOperation of going to the toilet.
  3. If you find the bathroomThe doorIt’s open, that means the bathroom is empty and we can go in. But don’t forget to close it at the same timeThe door.
  4. Wait for us to finish the toilet, we will come out, this time must remember to openThe door
  5. Others found thatThe doorIt’s open, which means they can go to the bathroom

The above process, the door of the toilet is our switch.

Code 1

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: url(./1.jpg) no-repeat 0 0 / 100% 100% fixed;
      height: 100vh;
    }

    ul {
      list-style: none;
    }

    li {
      height: 40px;
      border: 1px dashed #ccc;
      color: #fff;
    }
  </style>
</head>

<body>
  <ul id="ul"></ul>
  <script>

    // Generate 100 li tags
    Object.keys(new Array(100).toString()).forEach(val= > ul.innerHTML += `<li>${+val + 1}</li>`)


    // Define the variable to indicate whether the toilet is open or closed
    let door = true;

    window.onscroll = function () {
      // The toilet is not open
      if(! door) {console.log("Don't come. There's someone in the toilet 😡");
        return
      };
      // Close the door yourself
      door = false;
      console.log("It's my turn to pee. Happy.");
      setTimeout(() = > {
        console.log("Finished 😄");
        // Open the door again
        door = true;
      }, 2000);
    }

  </script>
</body>

</html>
Copy the code

Results 1

Work to use

With a few modifications to the above code, a scrolling paging feature of native JS can be implemented

Code 2

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: url(./1.jpg) no-repeat 0 0 / 100% 100% fixed;
      height: 100vh;
    }

    ul {
      list-style: none;
    }

    li {
      height: 40px;
      border: 1px dashed #ccc;
      color: #fff;
    }
  </style>
</head>

<body>
  <ul id="ul"></ul>
  <script>
    // Generate 100 li tags
    Object.keys(new Array(20).toString()).forEach(val= > ul.innerHTML += `<li>${+val + 1}</li>`)


    let door = true;

    window.onscroll = function () {
      if(! door) {console.log("Data has not been requested yet.");
        return
      };

      // Check whether the scroll bar has reached the bottom
      const scrollTop = ul.offsetHeight - document.body.offsetHeight - pageYOffset;
      if (scrollTop >= 5) {
        console.log("The scrollbar hasn't hit bottom yet.");
        return
      }

      door = false;
      console.log("Start sending requests for data...");
      setTimeout(() = > {
        Object.keys(new Array(20).toString()).forEach(val= > ul.innerHTML += `<li>${+ul.childElementCount + 1}</li>`)
        console.log("Data is back. Render done.");
        door = true;
      }, 2000);
    }

  </script>
</body>

</html>
Copy the code

Results 2

Wechat account of friends

Add big brother wechat and thousands of peers to enhance technical communication life

hsian_

The last

The code word is not easy and your clicks and likes are my best motivators