The button to request
<body>
<button id="btn">submit</button>
<script>
let btn = document.getElementById('btn')
btn.addEventListener('click', debounce(a,1000))
function a() {
console.log('Submitted successfully');
}
</script>
</body>
Copy the codeThe above code defines a button, gets its DOM structure and listens for its click event. Once the button is clicked, debounce is called and a is called by debounce. And how about a function that prints results only once, without wasting network resources, after multiple clicks?
A lot of people think, I’ll define a timing function, send a request after a certain amount of time after each click, and then define a variable to control the timing function, so here’s the code
demonstration
function debounce(fn, delay){
let timer = 0
return function(){
timer++
if(timer > 0) {setTimeout(() = >{
timer = 0
},delay)
if(timer == 0){
fn()
} }
}
}
Copy the codeThe code analysis
Pass in the parameter delay as the timer delay time, define timer = 0, and then increase. As long as timer > 0, the timing function will be executed to change the timer back to 0, and then call fn to print the result if the timer is 0. Is the logic clear, but does the code work?
Obviously you have any questions, you can click on multiple times, only delay the printing time here, that is to say, the click will still be issued repeatedly applied for many times, and timing functions for asynchronous functions, that is to say, I have to decide whether the timer is below 0, judge whether the timer is greater than 0, after here is two holes of thinking, So we made adjustments to those two problems.
Add a clear timer before the timer function, so as long as you keep clicking I will clear the last request, only one second after your last click will send the request, and get the printed result.
function debounce(fn, delay){
let timer = null
return function(){
clearTimeout(timer) // Clear the timer
timer = setTimeout(() = >{
fn()
},delay)
}
}
Copy the codeYou probably get a sense of what anti-shake is.
Image stabilization
concept
Generally speaking, anti – shake is in the specified time, there is no trigger for the second time, so it will be executed
Take the example above: if I do not click the button a second time or later, the print operation is performed, that is, the last click is valid.
The implementation code
function debounce(fn, delay){
let timer = null
return function(){
Let arg = arguments // Accept arguments
clearTimeout(timer)
timer = setTimeout(()=>{
fn.apply(this,arg)
},delay)
}
}
The breakpoint
concept
The concept of throttling is to trigger once within a specified time, that is to say, even if you click button request for many times, I will only send it once. Although the effect is the same as that of shaking prevention, the process is different
Code implementation
function throttle(fn,daley = 1000){
let timer = null
return function(){
let arg = arguments
let now = Date.now() // Click the time of the event
if(now - timer >= daley){
fn.call(this,arg)
timer = Date.now() // Save click time for next use}}}Copy the codeAlso defines a variable timer, just click in time, and then, to define now, access to the click event of the time, save the time for the next click click after use, if you click on the time interval of time and the last click no more than delay the time, then we will send the request, it is also possible.
conclusion
As for anti-vibration and throttling, we have just talked about it. In fact, there are more complex operations to follow, and we still need to learn more.
I am xiaobai, we study together, if there are mistakes, please point out, thank you!