1. The throttle

Only one event can be triggered within a period of time. If multiple events are triggered within this period of time, the callback function is triggered only after the first event takes effect. The callback function can be triggered again after the first event takes effect within n seconds.

For example: round seeding figure 98K click a shot a bullet can not shoot during king of Glory hero skill cooling

Code implementation:

function throttle(fn,delay){

  let flag = true;



  return function() {

    if(flag){

      flag = false;

      setTimeout(() =>{

        flag = true

      },delay)

      return fn()

    }

  }  

}

Copy the code

Effect: Even if the same event is fired many times over a period of time, after a callback is executed once, the callback function stops working for a specified period of time and does not take effect again until that time has passed.

2. If you

When the event is triggered, the callback function is delayed for n seconds. If the event is triggered again within n seconds, the time is restarted (last time in effect within n seconds).

For example: Regal City input box search function page resize event

Code implementation:

function debounce(fn,delay){

  let timer = null;

  return function() {

    if(timer){

      clearTimeout(timer)

    }

    timer = setTimeout(fn,delay)

  }

}

Copy the code

Effect: No matter how many times you fire a callback in a given period of time, only one callback is executed.

Cases 3.

Write an example using both throttling and anti-shaking above 💡

<! DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">

  <title>Document</title>

  <style>

    .box{

      width: 90%;

      height: 200px;

      outline: blanchedalmond 1px solid;

      margin: 10px auto;

      padding: 20px;

      box-sizing: border-box;

    }

    .container{

      height: 60px;

      margin-top: 20px;

      display: flex;

      justify-content: space-between;

      align-items: center;

    }

    .aa{

      width: 60px;

      height:60px;

      text-align:center;  

      color: white;

    }

    .aa>div{

      width: 60px;

      height: 40px;

    }

    #target{

      background-color: coral;

    }

    #home{

      background-color: aqua;

    }

    #bullet{

      width: 60px;

    }

    #bullet>div{

      position: absolute;

      left: calc(5% + 20px);

      width: 30px;

      height: 10px;

      background-color: dimgrey;

    }

    #hanxin{

      text-align: center;

      position: relative;

      left: 0px;

    }



    .send{

      animation: move 1s linear;

      animation-fill-mode: forwards;

    }

    @keyframes move

    {

to {left: calc(90% - 35px); }

    }

  </style>

</head>

<body>

  <div class="box">

< h2 > throttling < / h2 >

    <button id="shoot"Launch > < / button >

    <text id="text1"</text>

    <div class="container">

      <div id="bullet"> a pistol

      </div>

      <div class="aa" id="target"> target

        <div></div>

      </div>

    </div>

  </div>

  <div class="box">

< h2 > if < / h2 >

    <button id="back"> back < / button >

    <text id="text2"Word-wrap: break-word! Important; "> </text>

    <div class="container">

      <div id="hanxin"> han xin < / div >

      <div class="aa" id="home"> spring

        <div></div>

      </div>

    </div>

  </div>

</body>

<script>

let bullet = document.querySelector('#bullet');

let hanxin = document.querySelector('#hanxin');

let shoot = document.querySelector('#shoot');

let back = document.querySelector('#back');



let text1 = document.querySelector('#text1')

let text2 = document.querySelector('#text2')



/ / throttling

// The two parameters are the callback function to execute, and the interval

function throttle(fn,delay){

  let flag = true;



  return function() {

    if(flag){

      flag = false;

      text1.textContent = 'Bullets are loaded.'

      setTimeout(() =>{

        flag = true

        text1.textContent = 'The bullets are ready'

      },delay)

      return fn()

    }

  }  

}



/ / image stabilization

function debounce(fn,delay){

  let timer = null;

  return function() {

    if(text2.textContent === 'Heroes are back in town') {

      return alert('Han Xin has returned to the city, refresh the page and try again! ')

    }

    if(timer){

      clearTimeout(timer)

    }

    text2.textContent = Heroes return to town

    timer = setTimeout(fn,delay)

  }

}



// Shooting incident

function shooting() {

  var zd  = document.createElement("div")

  bullet.appendChild(zd).classList.add('send')

}



// Back to town event

function goHome() {

  hanxin.style.left = 'calc(100% - 60px)';

  text2.textContent = 'Heroes are back in town'

}



let a = throttle(shooting,2000)

shoot.addEventListener('click',a)



let b = debounce(goHome,3000)

back.addEventListener('click',b)

</script>

</html>

Copy the code

Effect:

You can see that after the bullet is fired, it takes a while ⏱ to fire again.

When Han Xin returns to the city, we click the return button again, and the return time will be recalculated ⏱

4. To summarize

  • Throttling is an event that triggers an immediate callback and then triggers again for a period of time during which no callback is executed no matter how many events are triggered (similar to a hero cooldown).
  • After the event is triggered, the callback is executed after a period of time. During this period, the event is triggered again and the time is recalculated (similar to the hero returning to the city).
  • Throttling and stabilization both prevent multiple calls to the function.