javaScript基础入门篇

Posted whmwhm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaScript基础入门篇相关的知识,希望对你有一定的参考价值。

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>
View Code

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>
View Code

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>
View Code

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秒输出一个随机数,只可以输出一次
View Code

 

函数节流:

  • 定义:函数节流,就是我们希望一些函数不要连续的触发。甚至于规定,触发这个函数的最小间隔是多少时间。
技术分享图片
<!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>
View Code

 

以上是关于javaScript基础入门篇的主要内容,如果未能解决你的问题,请参考以下文章

前端就业课 第一阶段HTML5 零基础到实战JavaScript基础一篇入门

javaScript基础入门篇

JavaScript基础知识-快速入门篇

Kotlin基础从入门到进阶系列讲解(基础篇)Fragment的基本使用

Kotlin基础从入门到进阶系列讲解(基础篇)Fragment的基本使用

第1719期简明 JavaScript 函数式编程-入门篇