How to understand JS function anti-shake and function throttling

Overview

Function anti-shake and function throttling both define a function that receives a function as a parameter and returns a function with anti-shake or throttling added.

Therefore, function anti-shake and function throttling can be regarded as a function factory, which is responsible for processing and modifying the incoming function accordingly, and then producing a new function with certain functions.

Function anti-shake is executed only once within a certain period of time, while function throttling is executed at intervals

Suppose there is such a scenario: on a certain page, there is a button called "Load More". The function of this button is to use ajax to request more data from the backend server to display on the page. We all know that the response to an ajax request is asynchronous and there will be a certain response time. If the user clicks the button again immediately after clicking it, according to the operation of the conventional callback function, the callback function will be executed again immediately. In this case, if the user clicks the "Load More" button twice in a short period of time, the callback function will be executed to initiate two identical ajax requests to the backend. The server will receive the requests one by one and process the returned data. Two requests in a short period of time are fine, but what if the user clicks the "Load More" button n times in a row? Then, n identical requests will be sent to the server in a short period of time. Each time the backend processes the ajax request and returns data, the page will be re-rendered, even though the content has not changed. This will cause performance problems, not only putting pressure on the server, but also causing unnecessary rendering for the browser. This is a side effect of frequent function execution.

So how can we set the click event callback function of this button to reduce the side effects caused by frequent execution of this function?

1. Function debounce

The design idea of ​​function anti-shake is to add a waiting time before the function is executed. If the function needs to be executed again during this waiting time, the waiting time is recalculated and the function is waited again. This process is repeated until the waiting time is up and the function does not need to be executed again.

Take the above scenario for example. Assuming that the response time of sending an ajax request to the backend is about 2s, then set the waiting time to 2s. When the user clicks the "Load more" button for the first time, the callback function is not executed immediately, that is, the ajax has not been sent yet. At this time, the function is waiting. If the user clicks "Load more" again within 2s, the waiting time is recalculated and another 2s is waited. At this time, 2s has passed and the user has not clicked the "Load more" button for the third time, then the function starts to execute and sends an ajax request to the backend.

Function anti-shake is implemented as follows:

function debounce(fn, delay){
    let timeId = null
    return function(){
        let context = this
        if(timeId){window.clearTimeout(timeId)}
        timeId = setTimeout(()=>{
            fn.apply(context, arguments)
            timeId = null
        },delay)
    }
}

2. Function throttling

The design idea of ​​function throttling is to add a cooling time after the function is executed. The function is executed immediately when it is executed for the first time, but a cooling time is set after its execution. During the cooling time, the function cannot be executed again until the cooling time ends and the function is allowed to be executed.

Take the above scenario as an example. Assume that the cooling time is also set to 2s. After the user clicks "Load more" for the first time, the callback function of the button will be executed, that is, an ajax request will be sent to the background. At this time, the user immediately clicks the "Load more" button again. Since the cooling time of 2s has not expired at this moment, a delayed execution will be added to the second function execution.

function throttle(fn, delay){
    let canUse = true
    return function(){
        if(canUse){
            fn.apply(this, arguments)
            canUse = false
            setTimeout(()=>canUse=true, delay)
        }
    }
}

The above is the details of how to understand JS function anti-shake and function throttling. For more information about JS function anti-shake and function throttling, please pay attention to other related articles on 123WORDPRESS.COM!