What is the throttle?
Prevent a continuous function calls in a short time.
For example: Set a button to request the server, if you do not set the throttle, you can get unlimited clicks, once a trigger point function.
Examples of such back: A function can only be performed once every three seconds function, within three seconds of the click event does not execute the function.
What is image stabilization?
When the trigger event, a period of time no longer trigger event, the event handler function will be performed once . If the set time before the arrival of another triggering event, will re-open delay.
Several operations will be combined into one operation
Anti-shake function, just as when the Master put the skills, you need to read the article, only to read the release skills. If you have not read the article skills, skills will then re-read the article.
Common anti-shake event: scroll mouse scroll event
Difference image stabilization and throttling?
Throttle function: no matter how often trigger event, will perform a function within a specified period of time.
Anti-shake function: Only when the last trigger event, will perform a function.
Throttling function principle:
Setting a variable switch, when the switch is ture can be performed when, after sending the request, the switch is set to false, and then set a timer, when after receiving the return data, and then turn on the switch;
<button id = "btn"> transmission request </ Button>
<Script> var canClick = to true // provided a switch
btn.onclick = function () {
IF (canClick) { // If the switch is open, it can be described click
canClick = to false // turn off the switch a retransmission request
console.log ( "ajax request transmission" )
the setTimeout ( function () { // set the timer, after receiving the request, the timer opens the switch at the end
console.log ( "Finish" )
canClick = to true
}, 3000 );
}
} </ Script> // this function can be sent once every 3 seconds a request
Anti-shake function principle
Using the timer setTimeout do shake. When the mouse scroll trigger events when the first period of delay with setTimeout again executed, if during this time delay has triggered function, it clearTimeout old timer,
Then setTimeout a timer Repeat the procedure.
<Script>
var Timer;
window.onscroll = function () {
IF (Timer) {
the clearTimeout (Timer)
}
Timer = the setTimeout ( function () {
the console.log ( 'sending ajax request, load data with more' )
} 500 )
}
</ Script>