1、同步和异步
同步：程序从上到下的执行，通俗的说for循环很耗费时间，但是程序就是傻等，傻傻的等待10个haha输出，然后输出3，比如妈妈去接儿子的飞机，需要等很长时间，等待的时候就是傻等，不同时做别的事情。
异步：通俗的讲就是遇见了一个特别耗费时间的事情，程序不会傻等，而是先执行后面的语句。比如妈妈去接儿子的飞机，需要等很长时间，但是妈妈同时逛逛商店什么的，不是傻等。
1 <script> 2 同步 3 console.log(1); 4 console.log(2); 5 for(i=1;i<=10;i++){ 6 console.log("haha") 7 } 8 console.log(3); 9 10 异步 11 console.log(1); 12 console.log(2); 13 var count = 0; 14 var timer=setInterval(function(){ 15 console.log("haha"); 16 count++; 17 18 if(count==10){ 19 clearInterval(timer); 20 } 21 },100); 22 console.log(3); 23 </script>
2、回调函数
- 回调函数：异步的语句做完之后要做的事情。
1 <script> 2 var count = 0; 3 var timer = setInterval(function(){ 4 console.log("haha"); 5 count++ 6 if(count == 10){ 7 clearInterval(timer); 8 // console.log("打印haha完毕"); 9 callback(); 10 } 11 },100); 12 function callback(){ 13 console.log("打印haha完毕") 14 } 15 </script>
3、apply和call语句
- apply和call功能是一样的，功能都是：让函数调用，并且给函数设置this是谁。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script> 10 // var obj={ 11 // "name":"zhangsan", 12 // "age":20, 13 // "sayName":function(){ 14 // console.log(this.name); 15 // } 16 // } 17 18 // obj.sayName(); //输出zhangsan 19 20 // function showName(){ 21 // console.log(this.name); 22 // } 23 // showName();//什么也没有 24 // showName(obj); //什么也没有 25 26 27 // call 和 apply作用: 28 // 1.执行函数 2.把函数内部的this指向改变 29 // showName.call(obj); //输出zhangsan 30 // showName.apply(obj); //输出zhangsan 31 32 //区别： 33 var obj = { 34 "name" : "zhangsan" 35 } 36 function sum(a,b,c){ 37 console.log(a+b+c); 38 console.log(this.name); 39 } 40 sum(1,2,3); 41 // 传参时 call直接逗号隔开 apply要用数组把参数包起来 42 sum.call(obj,1,2,3); 43 sum.apply(obj,[1,2,3]); 44 45 46 </script> 47 48 </body> 49 </html>
4、setTimeout()和setInterval() 和函数节流
- setInterval是设置间隔器；
- setTimeout是设置延时器。
- window.setTimeout(函数,时间);
在指定时间之后，执行函数一次，仅仅执行1次。window可以省略
清除延时器：
- clearTimeout();
1 //setInterval和setTimeout 2 setInterval(function(){ 3 console.log(Math.random()); 4 },1000);每间隔一秒输出一个随机数，可以一直输出 5 6 setTimeout(function(){ 7 console.log(Math.random()); 8 },1000);延迟1秒输出一个随机数，只可以输出一次
函数节流：
- 定义：函数节流，就是我们希望一些函数不要连续的触发。甚至于规定，触发这个函数的最小间隔是多少时间。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="点我"> <script> //函数节流 ，如果不使用节流点击按钮会点一下输出一个随机数 使用节流后点击按钮将不起作用 会自动按照设置的时间间隔输出 var btn = document.getElementsByTagName(‘input‘)[0];//获取按钮 var lock = true; btn.onclick = function(){ if(!lock) return; //如果lock=false，就直接返回，下面的不执行 console.log(Math.random()); lock = false; setTimeout(function(){ lock = true; }, 1000); } </script> </body> </html>