JavaScript Basics Introductory Article

Source: Internet
Author: User
Tags set time

1. Synchronous and asynchronous

Synchronization: The program from the top to the bottom of the execution, the popular say For cycle is time-consuming, but the program is silly wait, silly waiting for a haha output, Then output 3, such as mother to pick up the son's plane , need to wait a long time, waiting for the time is silly, do not do other things at the same time.

Asynchronous: The popular talk is to meet a particularly time-consuming thing, the program will not be silly, but first execute the following statement. For example, the mother to pick up the son's plane, need to wait a long time, but mom at the same time to shop or something, not silly.

1<script>2 Sync3Console.log (1);4Console.log (2);5      for(i=1;i<=10;i++){6Console.log ("haha")7     }8Console.log (3);9     Ten Asynchronous OneConsole.log (1); AConsole.log (2); -var count =0; -var timer=setinterval (function () { theConsole.log ("haha"); -count++; -  -         if(count==10){ + clearinterval (timer); -         }     +},100); AConsole.log (3); at</script>
View Code

2. Callback function

    • callback function: An asynchronous statement is done after it is done.
1<script>2var count =0;3var timer =setinterval (function () {4Console.log ("haha");5count++6         if(Count = = 10){7 clearinterval (timer);8Console.log ("print haha complete");9 callback ();Ten         } One},100); A function Callback () { -Console.log ("print haha complete") -     } the</script>
View Code

3. Apply and Call statements

    • The Apply and call functions are the same, and the function is to have the function called and to set who this is for the function.
1<! DOCTYPE html>2"en">34<meta charset="UTF-8">5<title>Document</title>67<body>8 9<script>Tenvar obj={ One//"name":"Zhangsan", A//" Age": 20, -//"Sayname": Function () { -//Console.log (this.name); the//     } -// } -  -Obj.sayname (); //Output Zhangsan +  -//function ShowName () { +//Console.log (this.name); A// } atShowName ();//there's nothing. -ShowName (obj); //there's nothing. -  -  -//Call and apply roles: -1. Execute function 2. Change the this point inside the function inShowname.call (obj); //Output Zhangsan -Showname.apply (obj); //Output Zhangsan to  +//difference: -var obj = { the         "name":"Zhangsan" *     } $ function sum (a,b,c) {Panax NotoginsengConsole.log (a+b+c); - Console.log (this.name); the     } +SUM (by); A//The call is separated by a comma when the parameter is passed. Apply to wrap the parameters in an array theSum.call (obj,1,2,3); +Sum.apply (obj,[1,2,3]); -  $  $</script> -      -</body> theView Code

4,setTimeout () and setinterval () and function throttling

    • SetInterval is to set the spacer;
    • SetTimeout is the setting of the delay timer.
    • Window.settimeout ( function , time );

after a specified time, the function executes once, and executes only 1 times. window can be omitted

To clear the delay device:

    • Cleartimeout ();

1 //setinterval and settimeout2        setinterval (function () {3             Console.log (Math.random ()); 4         },1000); outputs a random number every second, and can be output 56        setTimeout (function () {  7            Console.log (Math.random ()); 8         },1000); delay 1 seconds output a random number, can only output once
View Code

Function Throttle:

    • Definition: function throttling, which is what we want some functions not to trigger continuously. It is even stipulated that the minimum interval for triggering this function is how long.
<! DOCTYPE html>"en">"UTF-8"> <title>Document</title>"Button"Value="Point Me"> <script>//function Throttling, if you do not use the throttle click button will click the output a random number using throttling after the Click button will not work automatically according to the set time interval output var btn= document.getElementsByTagName ('input') [0];//get button var lock=true; Btn.onclick=function () {if(!lock)return; If lock=false, returns directly, the following does not execute Console.log (Math.random ()); Lock=false; SetTimeout (function () {lock=true; }, 1000); }    </script></body>View Code

JavaScript Basics Introductory Article

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.