Deepen understanding after practice

Function throttling

What is function throttling?

Functions that need to be triggered frequently will only take effect for the first time within the specified time ( absolute time difference ), and the subsequent ones will not take effect.

What are the characteristics? (After the function is executed, lastTime is reassigned)

If the trigger is continued within a time difference, it will be executed once.
Trigger continuously within multiple time differences, and finally execute multiple times.

What are the usage scenarios?

Scroll bar event monitoring
. . . (Embarrassing, bloggers have less experience, everyone understands that they can be used on demand, haha).

Function stabilization

What is function stabilization?

For functions that need to be triggered frequently, within the specified time ( relative time difference ), only the last time will take effect , and the previous ones will not take effect.

What are the characteristics? (After the function is triggered, the timer will be cleared and rebuilt)

Continuous triggering within a time difference may not necessarily be executed once.
Trigger continuously within multiple time differences, and finally execute once.

What are the usage scenarios?

When doing the search prompt business , the user keeps inputting values, and the event callback function is constantly triggered. The event callback function uses the function anti-shake technology to send a request when the input is relatively stable to reduce the number of requests.
. . . (Embarrassing, bloggers have less experience, everyone understands that they can be used on demand, haha).

Similarities and differences between the two

Same: After throttling/anti-shake, the function may not be executed every time it is triggered. Both can be used to restrict the function to execute only once within the specified time.
Difference: The concept of the prescribed time for throttling and anti-shake is different. The prescribed time in function throttling is an absolute time difference and will not be refreshed, while the prescribed time in function anti-shake is a relative time difference and will be refreshed.

Practice process

operation result

Insert picture description here

Result analysis

The first four throttle outputs

Clicking crazy for more than four seconds, the click event function of btn1 is continuously triggered, but because it is throttled, it outputs one output per second, and finally has four outputs.

The last anti-shake output

Clicking crazy for many seconds, the click event function of btn2 is constantly triggered, but because it is anti-shake, there is no output for the first few seconds. Stop clicking and wait for one second before an output appears.

Related code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数节流、函数防抖</title>
</head>
<body>
<button id="btn1">函数节流</button>
<button id="btn2">函数防抖</button>
<script type="text/javascript">
    function throttle(fn,delay){
    
    
        let lastTime = 0;
        return function(){
    
    
            let nowTime = Date.now();
            if(nowTime-lastTime>delay){
    
    
                fn.call(this);
                lastTime = nowTime;
            }
        }
    }
    document.getElementById('btn1').onclick = throttle(function(){
    
    console.log('函数节流，执行时间：'+Date.now())},1000);

    function debounce(fn,delay){
    
    
        let timer = null;
        return function (){
    
    
            clearTimeout(timer);
            timer = setTimeout(function(){
    
    
                fn.call(this);
            },delay)
        }
    }
    document.getElementById('btn2').onclick = debounce(function(){
    
    console.log('函数防抖，执行时间：'+Date.now())},1000)
</script>
</body>
</html>

Function throttling, function anti-shake [practice]

Deepen understanding after practice

Function throttling

What is function throttling?

What are the characteristics? (After the function is executed, lastTime is reassigned)

What are the usage scenarios?

Function stabilization

What is function stabilization?

What are the characteristics? (After the function is triggered, the timer will be cleared and rebuilt)

What are the usage scenarios?

Similarities and differences between the two

Practice process

operation result

Result analysis

The first four throttle outputs

The last anti-shake output

Related code

Guess you like