Home > Developer > JavaScript
In fact, the earliest look at the design pattern is the simple understanding of the JS language itself, so it is easy to forget after reading the understanding, perhaps after the actual work needs to remember it;
Look below: <! DOCTYPE html>
"en">"UTF-8"> <meta name="Viewport"Content="Width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible"Content="Ie=edge"> <title>Document</title>window.onresize=function () {con (); }; function con () {Console.log ("AAAAA") }</script>
In this case, the browser will probably check the window changes about 10 times per second, obviously bad for performance;
Let's look at a throttling function to do the processing:
<HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title></Head><Body> </Body></HTML><Script>
window.onresize=function() {throttle (con,300);};functioncon () {Console.log ("AAAAA")}
//throttle function;functionthrottle () { varFirst_param=arguments[0], Methods,time_param; if (typeofFirst_param=== 'Boolean') { Methods=arguments[1]; Methods.throttletimeid&&cleartimeout (Methods.throttletimeid); } Else{ Methods=First_param; Arguments.callee (true, methods); //Arguments.callee The reference to the function;//No closures, immediately destroy the memory;Time_param=arguments[1]|| -//The default is 500 milliseconds;//The argument of the function points to the argument; //Window.throttle (True, methods);//arguments.callee a reference to a function;//to bind a timer to a function, defer execution Methods.throttletimeid=SetTimeout (function() {methods (); },time_param)}}</Script>
By passing the function to be executed into the throttle function, the effect is achieved;
When the user repeatedly quickly drag the window, within the set time Time_param; When the anti-Shake function detects true, the function is immediately clear, unless the user is no longer operating at the specified time;
This is the same with the Ajax Repeat submit button;
Simple hypothesis:
<input value= "Query" id= "Btns" >
$ ("#btns"). On ("click", Function () {
Throttle (query,300);
})
function query () {
$.ajax ({
URL: "Api/user",
Method: "Post",
data:{
"Name": "Liuliu"
},
Success:function (res) {
Console.log (RES)
}
})
}
JavaScript function Throttling
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
