This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

preface

Anti-shake and throttling, this is the front end to prevent users from frequently calling the same interface, for example, a short time to repeatedly click upload the same file, a short time to repeatedly click submit the same comment, asynchronous operation has not brought you feedback, so you repeatedly upload multiple files, repeatedly submit multiple comments.

This article teaches you how to use anti – shake throttling with common usage scenarios and solutions.

scenario

To simplify the example, we use latency to simulate a return from a back-end interface.

<body>
<button onclick="comment()">comment</button>
<script>
    const commentApi = () = > {
        // We use latency to simulate asynchronous requests
        setTimeout(() = > {
            const div = document.createElement('div')
            div.innerText = 'I've been here'
            document.body.appendChild(div)
        }, 1000)}const comment = () = > {
        // Request a comment Api
        commentApi()
    }
</script>
</body>
Copy the code

This is an example of commenting, because the interface doesn’t respond to comments until a second later.

The user intended to post only one comment, but because of the response time required by the interface, he thought his first click did not take effect, so he clicked two more times, and apparently posted three identical comments that were not intended by the user.

It is desirable that users do not repeatedly send requests while they are still in progress. At this point, you need to prevent and throttle.

Image stabilization

The core

  • Set delay, short time high frequency trigger only the last trigger successful

explain

Anti-shake refers to setting a delay, for example, after I click on it, I set a delay of 1s, and then I start uploading after 1s.

If the event is clicked again within 1s, then the delay is cleared, resetting the 1s delay, i.e. you have to wait 1s again before the upload has started.

That is, no matter how much you keep clicking, only the last click after you stop clicking will succeed.

Repair scenario examples

A few quick clicks or just one comment.

The downside is that it takes longer for the user to get a response, taking into account the latency plus the interface’s response.

<body>
<button onclick="comment()">comment</button>
<script>
    const commentApi = () = > {
        // We use latency to simulate asynchronous requests
        setTimeout(() = > {
            const div = document.createElement('div')
            div.innerText = 'I've been here'
            document.body.appendChild(div)
        }, 1000)}let later
    const comment = () = > {
        // Reset the delay if the delay request has already been set
        if (later) {
            clearTimeout(later)
        }
        later = setTimeout(() = > {
            commentApi()
        }, 1000)}</script>
Copy the code

So if you generally do not completely suitable for this type of scenario, it is more suitable for need after perform a certain operation scenarios, please input a paragraph, for example, after the end of the input to request again, certainly don’t want you began to request in the process of input, then set up the image stabilization, until find you stop input to the request.

The throttle

The core

  • Set the status lock, short time high frequency trigger only the first time will trigger successfully

explain

Throttling is setting state locks, such as setting a key as a lock. The initial state of the lock is off. We set the key to false.

When you click, the key is evaluated, and if it is found to be false and unlocked, the request is initiated and the key is locked at the same time, setting flag to true.

And then when you click on the request again, you also have to check the key, and it’s locked, so it doesn’t matter how much you click on it.

And when do you close the lock again? After your interface returns to the front end telling you that you are done uploading, set key off to false to submit the request again.

Repair scenario examples

A few quick clicks or just one comment. A second request can only be published after one request has been successfully published, which is appropriate for this scenario.

<body>
<button onclick="comment()">comment</button>
<script>
    let key = false
    const commentApi = () = > {
        setTimeout(() = > {
            const div = document.createElement('div')
            div.innerText = 'I've been here'
            document.body.appendChild(div)
            // The request ends
            key=false
        }, 1000)}const comment = () = > {
        // Start execution without locking
        if(! key) {// Request start, lock
            key = true
            commentApi()
        }
    }
</script>
</body>
Copy the code

Stern said

If you feel that the article is helpful to you, welcome to like collection oh, there are any mistakes or suggestions can also leave a message, thank you ~