当前位置：网站首页>Some of my understanding about anti shake and throttling

Some of my understanding about anti shake and throttling

2022-07-25 00:55:00 【Classmate Pan Pan】

What kind of impact will anti shake and throttling cause ？

 Continuously triggered events will cause excessive pressure on the server , Or too much memory , Anti shake and throttling can be used to alleviate .

What is anti shake ？

 Anti shake refers to events triggered continuously , stay n Seconds later, execute the callback , If n The event is triggered again within seconds , Then it's recalculation .

 Use scenarios ：
	 For example, the form submission button 

 Anti shake code implementation ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
    padding:0;margin:0;}
    .scroll-box{
    
        width : 100%;
        height : 500px;
        background:blue;
        overflow : auto;
    }    
    .scroll-item{
    
        height:1000px;
        width:100%;
        /* background-color: green; */
    }
    </style>
<body>
    <div class="scroll-box">
        <div class="scroll-item"></div>
    </div>
</body>
<script>
let debounce = function (fn, wait) {
    
    let timeout = null;
    return function () {
    
      if (timeout !== null) clearTimeout(timeout);// If triggered multiple times, the last record delay will be cleared 
      timeout = setTimeout(() => {
    
        fn.apply(this, arguments);
        //  Or directly  fn()
        timeout = null;
      }, wait);
    };
}
     //  Processing function 
  function handle() {
    
    console.log(arguments)
    console.log(Math.random());
  }
  //  The test case 
  document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle, 3000));
</script>
</html>

What is throttling ？

 Throttling refers to events that are triggered continuously , stay n It must be executed once every second .

 Use scenarios ：
	 When the user pulls down and refreshes the list , Throttling is better than anti shaking 

 Throttling code implementation ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
    padding:0;margin:0;}
    .scroll-box{
    
        width : 100%;
        height : 500px;
        background:blue;
        overflow : auto;
    }    
    .scroll-item{
    
        height:1000px;
        width:100%;
        /* background-color: green; */
    }
</style>
<body>
    <div class="scroll-box">
        <div class="scroll-item"></div>
    </div>
</body>
<script>
let settime = (func,howtime)=>{
    
    let timers = null
    return ()=>{
    
        if(!timers){
    
            timers = setTimeout(() => {
    
                // func.apply(this,arguments)
                func()
                timers = null           
            },howtime);
        }
    }
}

function handle(){
    
    console.log(arguments);
    console.log(Math.random());
}

document.getElementsByClassName("scroll-box")[0].addEventListener("scroll",settime(handle,2000))   
</script>
</html>