JavaScript快速入门（二）

javascript,快速,入门 · 浏览次数 : 98

小编点评

```html Document

yetangjian

```

正文

文件中引入JavaScript

嵌入到HTML文件中

在body或者head中添加script标签

<script>
    var age = 10;
    console.log(age);
</script>

引入js文件

创建一个js文件

var age = 20;
console.log(age);

在html文件中src引入改文件

<body>
    <script src="./age.js"></script>
</body>

引入网络来源文件，和引入本地的js文件一样，通过src

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</body>

数据类型

原始数据类型：基本的数据类型（数值、字符串、布尔值）

复合数据类型：对象（一个对象可以看做是存放各种值得容器，由基础数据类型组成）

var user = {
    "name":"ming",
    age:20,
    is_register:True
}

特殊数据类型：null和undefined

typeof可以用来判断基础数据类型

<body>
    <script>
        var age = 20;
        console.log(typeof age);
    </script>
</body>

算数运算符

加减乘除取余：+ 、-、*、/、%

自增或者自减相当于当前值+1或者-1

<body>
    <script>
        var num = 20;
        console.log(++num);
        console.log(--num);
    </script>
</body>

自增自减需要注意，有两种写法一种运算符号在前，一种运算符号在后，两种效果不一样

运算符号在前是先自增再运行，运算符号在后是先运行在自增

<body>
    <script>
        var num = 20;
        console.log(++num); // 21
        var num1 = 20;
        console.log(num1++); // 20
    </script>
</body>

赋值运算符

赋值运算符	表达式
=	赋值运算符
+=	x +=y 等同于 x= x+y
-=	x -=y 等同于 x = x-y
*=	x = y 等同于 x = xy
/=	x /= y 等同于 x = x/y
%=	x %= y 等同于 x = x % y

比较运算符

比较运算符	描述
<	小于
>	大于
<=	小于或者等于
>=	大于或者等于
==	相等
===	严格相等
!=	不相等
!==	严格不相等

== 和 ===区别

<body>
    <script>
        var num = 20;
        var num1 = 20;
        var num2 = "20";
        console.log(num == num1); // True
        console.log(num == num1); // True
        console.log(num == num2); // True
        console.log(num === num2);// 严格比较数值和类型 False
        console.log(num != num2);// False
        console.log(num !== num2);// True 类型不一致
    </script>
</body>

布尔运算符

取反运算符（！）

<body>
    <script>
        var flag = true;
        console.log(!flag);
    </script>
</body>

提示 undefind 、null、false、0、NaN、空字符串取反都为true

且运算符（&&）

<body>
    <script>
        console.log(10<20 && 10>5); // True
    </script>
</body>

活运算符（||）

<body>
    <script>
        console.log(10>20 || 10>5); // True
    </script>
</body>

用Switch简化多个if...else....

swith后面跟表达式，case后面记得一定要加上break，不加上break会把后续的都执行，最后default就是以上case都不是执行

<body>
    <script>
        var day = 3;
        switch(day){
            case 0:
                console.log("今天周一");
                break;
            case 1:
                console.log("今天周二");
                break;
            case 2:
                console.log("今天周三");
                break;
            default:
                console.log("今天不是周一、二、三")
        }
    </script>
</body>

用三目运算符来代替if...else...

<表达式>？y ：x

表达式正确返回y，错误则返回x

<body>
    <script>
        var num = 10;
        var result = num % 2 == 0 ? "是偶数" : "是奇数";
        console.log(result)
    </script>
</body>

字符串

<body>
    <script>
        //字符串要么使用单引号嵌套双引号，要么使用双引号嵌套单引号
        var str1 = '我说"你好呀"';
        //如果想使用双引号嵌套双引号，单引号嵌套单引号或者换行就需要用到反斜杠
        var str2 = '我说\'你好呀\'';
        var str3 = "今天天气真好，\
        我想出去玩";
        console.log(str1,str2,str3);
    </script>
</body>

用属性length来查看字符串长度

<body>
    <script>
        var str3 = "今天天气真好，\
        我想出去玩";
        console.log(str3.length);
    </script>
</body>

charAT查看索引位置的字符串

<body>
    <script>
        var str = "yetangjian的博客园";
        console.log(str.charAt(1)); // 查看索引1位置的字符串e
        console.log(str.charAt(str.length -1));//查看最后一位的字符园
        //如果索引不存在会打印出来空字符串
        console.log(str.charAt(-1));
        console.log(str.charAt(str.length+1));
    </script>
</body>

concat连接两个字符串，创建新的字符串，不影响老的字符串（拼接的如果不是字符串，也会先转为str再拼接）

同样也可以用“+”拼接

<body>
    <script>
        var str = "yetangjian的博客园";
        var str1 = "丰富多彩呀~~";
        var result = str.concat(str1);
        document.write(result);//页面上展示出来拼接后的
        // 可以接收多个参数拼接
        var str3 = "看的停不下来了";
        document.write(str.concat(str1,str3));
    </script>
</body>

concat和+号的区别

+号会先运算数字类型在转，所以下方会先做1+2后再转字符串

concat不管什么，都会转字符串拼接

<body>
    <script>
        var num1 = 1;
        var num2 = 2;
        var str3 = "3";
        document.write("".concat(num1,num2,str3)); // 123
        document.write(num1+num2+str3);// 33
    </script>
</body>

substring截取字符串，两个参数，参数1开始的位置的索引，第二个参数结束位置的索引（结束索引位置不取，左闭右开）

<body>
    <script>
        var str = "yetangjian的博客园";
        // 截取博客园三个字,左闭右开
        document.write(str.substring(11,str.length));
        // 省略第二个参数，直接取到最后
        console.log(str.substring(11)); //博客园
        //在substring中参数如果是负数，直接当索引0用
    </script>
</body>

substr用法基本和substring一样，区别是第二个参数不在是结束位置的索引，而是字符串的长度

<body>
    <script>
        var str = "yetangjian的博客园";
        var result = str.substr(11,3);//从索引位置11开始取，截取长度为3
        document.write(result);//博客园
        //如果省略第二个参数，直接取到结尾，如果第二个参数是个负数，会变为0即字符串长度为0的空字符串
        console.log(str.substr(11));//博客园
        console.log(str.substr(11,-4));//空字符串
        //如果第一个参数是负数，则从后向前计算字符位置，这个和之前的字符串不太一样
        console.log(str.substr(-3));
    </script>
</body>

indexof查询字符串第一次出现的位置，不存在则返回-1

<body>
    <script>
        var str = "yetangjian的博客园";
        // 判断上述字符换中是否存在博客园
        if (str.indexOf("博客园") > -1){
            console.log("存在");
        }else{
            console.log("不存在");
        }
        // 参数2位置开始索引位置
        console.log(str.indexOf("博客园",12));//从12索引位置不存在了，所以返回-1
    </script>
</body>

trim方法去除首尾两端的空格，包括\r \n \t都能去掉

<body>
    <script>
        var str = "   yetangjian的博客园   ";
        console.log(str);//   yetangjian的博客园   
        console.log(str.trim());//yetangjian的博客园
    </script>
</body>

split方法是按分隔符，返回一个分割出来的字符串数组

<body>
    <script>
        var str = "yetangjian|的|博客园";
        var result = str.split("|");
        console.log(result);// ["yetangjian", "的", "博客园"]
        console.log(str.split(""));//["y", "e", "t", "a", "n", "g", "j", "i", "a", "n", "|", "的", "|", "博", "客", "园"]
        //存在第二个参数可以设置获取数组的长度
        console.log(str.split("",2));//["y", "e"]
    </script>
</body>

数组

查询、追加

<body>
    <script>
        var arr = [];
        arr[1] = 1 // 通过下标加入数组值
        console.log(arr)
        console.log(arr[1])//1
        console.log(arr.length)//2
    </script>
</body>

遍历

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"]
        // for 
        for (var i=0;i<city.length;i++){
            console.log(city[i]);
        }
        // while
        i = 0
        while (i < city.length){
            console.log(city[i]);
            i++
        }
        // for in 
        for (var i in city){
            console.log(city[i]);
        }
    </script>
</body>

数组静态方法Array.isArray()：判断是否为数组

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"]
        console.log(typeof(city));//object
        console.log(Array.isArray(city));//true
    </script>
</body>

push()/pop()方法：改变原数组末尾增加或删除

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"]
        //push
        city.push("nanjing");
        city.push("fujian","xiamen");//向尾部添加一个或多个
        console.log(city);
        //pop
        var deleteend = city.pop();
        console.log(deleteend);//"xiamen"
        console.log(city);//["shanghai", "guangzhou", "beijing", "nanjing", "fujian"]
    </script>
</body>

shift()/unshift：改变原数组在数组起始位置添加或删除

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        //shift
        var shiftfirst = city.shift();
        console.log(shiftfirst);//shanghai
        console.log(city);//["guangzhou","beijing"]
        //unshift
        city.unshift("hefei","chongqing");
        console.log(city);// ["hefei", "chongqing", "guangzhou", "beijing"]
    </script>
</body>

join按指定分隔符拼接数组成员，默认都是逗号

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        //join
        document.write(city.join());//shanghai,guangzhou,beijing
        document.write(city.join("|"));//shanghai|guangzhou|beijing
        document.write(city.join(""));//shanghaiguangzhoubeijing
        //join可以把数组拼成字符串，split可以把字符串拆成数组
        var result = city.join("|");
        console.log(result);
        var newArr = result.split("|");// shanghai|guangzhou|beijing
        console.log(newArr);//["shanghai", "guangzhou", "beijing"]
    </script>
</body>

concat数组合并

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        var contry = ["China","Japan"]
        //concat和+号区别
        console.log(city + contry);//变为字符串了shanghai,guangzhou,beijingChina,Japan
        console.log(city.concat(contry));//还是数组["shanghai", "guangzhou", "beijing", "China", "Japan"]
        //使用concat数组追加,注意看下面例子
        console.log(city.concat(1,2,3,[4,5,6]));// ["shanghai", "guangzhou", "beijing", 1, 2, 3, 4, 5, 6]
    </script>
</body>

reverse翻转

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"];
        console.log(city.reverse());//["beijing", "guangzhou", "shanghai"]
        //翻转字符串
        var word = "apple";
        console.log(word.split("").reverse().join(""));//elppa
    </script>
</body>

indexof返回元素在数组中第一次出现的位置，没有则返回-1

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing","shanghai"];
        console.log(city.indexOf("shanghai"));//0
        console.log(city.indexOf("nanjing"));//-1
        //第二个参数为起始位置
        console.log(city.indexOf("shanghai",2));//3
    </script>
</body>

Math对象

Math.abs（）绝对值

<body>
    <script>
        var num = -100;
        console.log(Math.abs(num));
    </script>
</body>

max和min返回最大最小值

<body>
    <script>
        console.log(Math.max(10,0,30,-5));//30
        console.log(Math.max());//-Infinity
    </script>
</body>

向上取整，向下取整

<body>
    <script>
        var num1 = 10.1;
        console.log(Math.floor(num1));//floor地板的意思，向地板取整，10
        console.log(Math.ceil(num1));//ceil天花板的意思，向天花板取整，11
    </script>
</body>

random随机数

<body>
    <script>
        console.log(Math.random());//Math.random() >=0 && Math.random()<1
    </script>
</body>

Date对象

<body>
    <script>
        console.log(Date.now());//时间戳：是指格林威治时间1970年1月1日 00:00:00 到现在的总秒数
        console.log(Date());//当前时间：Sun Apr 09 2023 12:56:46 GMT+0800 (中国标准时间)
        console.log(new Date().getDate());//一定要new一个出来才可以使用Date对象提供的一系列方法
        var d = new Date();
        console.log(d.getMonth() + 1); // 0表示1月
        console.log(d.getDay()); // 获取星期几，周日是0，周一是1
        console.log(d.getFullYear());//年份
        // 今年剩余多少天
        function leftDays(){
            var today = new Date();
            var endDays = new Date(today.getFullYear(),11,31,23,59,59,999); //最后一天的日期时分秒
            return Math.floor((endDays.getTime() - today.getTime()) / (24 * 60 * 60 * 1000) );
        }
    </script>
</body>

DOM

DOM（文档对象模型）是js操作网页的接口，作用是把网页转换为js对象，从而可以通过脚本对网页元素进行操作

浏览器将HTML解析为一系列节点，再把节点组成DOM Tree，DOM的最小单位是节点node

节点类型有7种： Document：整个文档树的顶层节点；DocumentType：doctype标签；Element：网页标签；Attribute：网页属性（class=right）；Text：标签和标签包含的文本；Comment：注释；DocumentFragment：文档片段

document对象获取元素

<body>
    <div>Hello world</div>
    <div class="name">xiaojianjian</div>
    <div id="pc">haobaobao</div>
    <div class="one two">12</div>
    <div class="one two">13</div>
    <script>
        // document.getElementsByTagName搜索标签名
        var divs = document.getElementsByTagName("div")[0];
        // 把hello world改成hello
        divs.innerHTML = "Hello";
        // document.getElementsByClassName类名
        var names = document.getElementsByClassName("name")[0];
        names.innerHTML = "bigjianjian"; 
        //getElementById，id是唯一的所以不需要后面加下标
        var pc = document.getElementById("pc");
        pc.innerHTML= "huaibaobao";
        //document.querySelector()方法接受一个CSS选择器作为参数，如果存在多个返回第一个
        var one = document.querySelector(".one.two");
        one.innerHTML = 14;//修改了第一个（原来12的位置）
        var two = document.querySelectorAll(".one.two")[1];//通过查询all来所有
        two.innerHTML = 15;
    </script>
</body>

document创建元素

<body>
    <div class = "test"></div>
    <script>
        var text = document.createElement("p");//创建一个p标签
        var content = document.createTextNode("我是文本");//创建文本信息
        //通过appendChild将内容或者子元素放入容器
        text.appendChild(content);
        console.log(text); //<p>我是文本</p>
        //增加属性
        var id = document.createAttribute("id");
        id.value = "root";
        //id的属性加入到容器中
        text.setAttributeNode(id);
        //把这个我们text放入class = test中
        var test = document.getElementsByClassName("test")[0];//先把容器读出来
        test.appendChild(text);//div容器中就会加入p标签了
    </script>
</body>

Element对象属性

<body>
    <div class = "test" id = "box1">Hello</div>
    <script>
        var box = document.getElementById("box1");
        //改变id属性
        box.id = "box2";
        //通过id找到className并修改
        box.className = "test1 test2"; 
        //追加className
        box.classList.add("addTest");
        //移除classNmae
        box.classList.remove("test1");
        //判读是否存在addTest属性
        if (box.classList.contains("addTest")){
            console.log("存在addTest");
        }
        //toggle如果存在则移除，不存在则加入
        box.classList.toggle("addTest");
        //innerHTML
        box.innerHTML = "大家好";
        //innerHTML和innerText区别：innerHTML可以识别标签，innerText作为一个字符串
        var str = "<a href='https://www.cnblogs.com/yetangjian/p/17253215.html'>bokeyuan</a>";
        box.innerHTML = str;
        //在创建一个div标签用innerText对比:innerHTML是可以点击的链接，innerText只是一个字符串
        var newDiv = document.createElement("div");
        var content = document.createTextNode("我是文本");
        newDiv.appendChild(content);
        var setId = document.createAttribute("id");
        setId.value = "text";
        newDiv.setAttributeNode(setId);
        var getBody = document.getElementsByTagName("body")[0];
        getBody.appendChild(newDiv);
        var newId = document.getElementById("text");
        newId.innerText = str ; 
    </script>
</body>

CSS操作

最简单的方法，直接添加元素节点属性style

<body>
    <div class="box1" id="box"></div>
    <script>
        var box = document.getElementById("box");
        box.setAttribute("style","background-color: red;height: 200px");
    </script>
</body>

通过节点的style属性

<body>
    <div class="box1" id="box"></div>
    <script>
        var box = document.getElementById("box");
        box.style.height = "300px";
        box.style.background = "red";
    </script>
</body>

还有一种写法

<body>
    <div class="box1" id="box"></div>
    <script>
        var box = document.getElementById("box");
        box.style.cssText = "height: 500px;background: red;"
    </script>
</body>

事件处理

html事件

<body>
    <button onclick="clickHandler()">按钮</button>
    <script>
        function clickHandler(){
            console.log("点击按钮")
        }
    </script>
</body>

DOM0事件

<body>
    <button id="btn">按钮</button>
    <script>
        //DOM0事件 优点HTML和js是分离的，Html事件没有分离
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            console.log("点击按钮")
        }
    </script>
</body>

DOM2事件

<body>
    <button id="btn">按钮</button>
    <script>
        //DOM2事件：优点可以增加多个事件，只要添加一个addEventListener
        var btn = document.getElementById("btn");
        btn.addEventListener("click",function(){
            console.log("点击按钮")
        })
    </script>
</body>

鼠标事件

<style>
    .box1{
        height: 200px;
        width: 200px;
        background: red;
    }
</style>
<body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3" onmouseup="clickHandler('onmouseup')">按钮3</button>
    <button id="btn4" onmousedown="clickHandler('onmousedown')">按钮4</button>
    <button id="btn5" class="box1" onmousemove="clickHandler('onmousedown')">按钮5</button>
    <script>
        var btn1 = document.getElementById("btn1");
        btn1.addEventListener("click",function(){
            console.log("单机")
        })
        var btn2 = document.getElementById("btn2");
        btn2.ondblclick = function(){
            console.log("双击");
        }

        function clickHandler(event){
            switch(event){
                case "onmousedown":
                    console.log("鼠标按下");
                    break;
                case "onmouseup": 
                    console.log("鼠标抬起");
                    break;
                case "onmousedown":
                    console.log("鼠标正在移动");
                    break;
            }
        }
    </script>
</body>

除了上方列举的这些，还有其他一些鼠标事件例如：onmouseenter，mouserover鼠标进入；onmouseleave，mouseout鼠标离开等等

那么onmouseenter和mouserover区别在于只在父元素添加事件，是否会在子元素上触发，同理鼠标离开也是

Event事件

<body>
    <button id="btn">按钮</button>
    <a href="https://www.cnblogs.com/yetangjian/p/17320268.html" id="ytj">yetangjian</a>
    <script>
        //event事件其实就是函数的参数
        var btn = document.getElementById("btn");
        btn.onclick = function(event){
            console.log(event);
            //有两个常用属性Target和type
            console.log(event.target);//点击哪里显示哪个节点 <button id="btn">按钮</button>
            event.target.innerHTML= "点击过了"; //监听到以后就可以去操作他了
            console.log(event.type);// click
        }

        var ytj = document.getElementById("ytj");
        //点击a标签不跳转
        ytj.onclick = function(e){
            e.preventDefault();//阻止默认事件
            console.log("点击A标签");
        }
    </script>
</body>

阻止事件冒泡

<body>
    <style>
        .root{
            height: 200px;
            width: 200px;
            background: red;
        }
        .box{
            height: 100px;
            width: 100px;
            background: blue;
        }
    </style>
    <div class="root" id="root">
        <div class="box" id="box"></div>
    </div>
    <script>
        //分别给root和box添加点击事件
        //这时候点击蓝色会打印root和box因为他会事件向上传递
        var root = document.getElementById("root")
        var box = document.getElementById("box")
        root.onclick = function(){
            console.log("root");
        }
        //如果我们想点击蓝色只答打印蓝色，就需要添加阻止冒泡
        box.onclick = function(e){
            e.stopPropagation();//阻止冒泡
            console.log("box");
        }

    </script>
</body>

键盘事件

<body>
    <input type="text" id="username">
    <script>
        var username = document.getElementById("username");
        //按下
        username.onkeydown = function(e){
            console.log("正在输入中...")
        }
        // 抬起
        //event唯一表示keyCode 例如回车是13
        username.onkeyup = function(e){
            console.log(e.target.value);
            if (e.keyCode == 13){
                console.log("输入完成");
            }
        }
        // keypress按下除ctrl alt shift meta以外的键触发
        username.onkeypress = function(e){
            console.log(e.target.value);
        }    
    </script>
</body>

表单事件类型

<body>
    <input type="text" id="username">
    <script>
        var username = document.getElementById("username");
        username.oninput = function(e){
            console.log(e.target.value);//读取数据
        }

        username.onselect = function(){
            console.log("鼠标选中了");
        }
        //change在你回车或者失去焦点才会触发
        username.onchange = function(e){
            console.log(e.target.value);
        }
    </script>
</body>

触发在表单上的事件

<body>
    <form id="myform" onsubmit="submitHandle()">
        <input type="text" id="username">
        <button id="formReset">重置</button>
        <button>提交</button>
    </form>
    <script>
        var formReset = document.getElementById("formReset");
        var myform = document.getElementById("myform");
        formReset.onreset = function(){
            myform.reset();//表单回到原始状态
        }
        //提交 注意都是作用在表单上的
        function submitHandle(){
            console.log("提交");
        }
    </script>
</body>

事件代理

由于事件会向上冒泡传播的父节点，所以我们可以子节点的监听定义在父节点上，有父节点统一处理事件。

<body>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
    <div class="box2">
        <div class="box1"></div>
    </div>
    <script>
        var box2 = document.getElementsByClassName("box2")[0];
        box2.onclick = function(e){
            console.log(e.target.className);//在父节点监听就只可以知道点击了那个className
        }
    </script>
</body>

定时器

延时执行setTimeout

<body>
    <script>
        //setTimeout两个参数第一个参数是函数，第二个参数是毫秒数
        var demo =function(){
            console.log("打印完成");
        }
        var timer = setTimeout(demo,3000);
        //取消定时器
        clearTimeout(timer);
        //注意定时器中this，调用的是全局
        // var name = "demo1";
        // var user = {
        //     name : "demo2",
        //     getName : function(){
        //         //this永远指向当前调用者
        //         console.log(this.name);
        //     }
        // }
        // user.getName() // demo2
        //一样的例子：如果我们用定时器
        var name = "demo1";
        var user = {
            name : "demo2",
            getName : function(){
                //this永远指向当前调用者
                setTimeout(function(){console.log(this.name)},3000)
            }
        }
        user.getName()//调用的是全局demo1
    </script>
</body>

间隔时间执行setInterval

<body>
    <script>
        var i = 0;
        //每一秒打印一条
        setInterval(function(){
            i++;
            console.log(i);
        },1000)

    </script>
</body>

一个运用例子，实现一个动画效果

<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: blue;
        opacity: 1;
    }
</style>
<body>
    <div class="box1"></div>
    <script>
        var box1 = document.getElementsByClassName("box1")[0];
        var opacity = 1;
        var fade = setInterval(function(){
            opacity -= 0.05; 
            box1.style.opacity = opacity;
            if (box1.style.opacity < 0){
                clearInterval(fade);
            }
        },100)
    </script>
</body>

防抖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        h3{
            height: 300px;
        }
    </style>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>

    <script>
        //滚动事件
        // window.onscroll = function(){
        //     var scrollTop = document.documentElement.scrollTop
        //     console.log(scrollTop);
        // }
        //我们做一个优化，让短时间大量触发的同一时间，只会执行一次函数
        function debounce(fn, delay){
            var timer = null;
            return function(){
                //timer存在就清空延时
                if(timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(fn, delay)
            }
        }
        window.onscroll = debounce(function(){
            var scrollTop = document.documentElement.scrollTop;
            console.log(scrollTop);
        },200)

    </script>
</body>
</html>

节流

上面的防抖存在一个问题，如果一直按着不放，就无法触发；那如果我想要按着不放，也可以触发就要用到节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        h3{
            height: 300px;
        }
    </style>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>
    <h3>yetangjian</h3>

    <script>
        //节流
        function throttle(fn, delay){
            var valid = true;
            return function(){
                if(!valid){
                    return false;
                }
                //延时时间内valid都是false会被直接return 出去，到延时时间valid置为true触发setTimeout
                valid = false;
                setTimeout(function(){fn();valid=true;},delay)
            }
        }
        window.onscroll = throttle(function(){
            var scrollTop = document.documentElement.scrollTop;
            console.log(scrollTop);
        },2000)

    </script>
</body>
</html>

与JavaScript快速入门（二）相似的内容：

JavaScript快速入门（二）

小编点评

yetangjian

yetangjian

yetangjian

yetangjian

yetangjian

yetangjian

yetangjian

yetangjian

yetangjian

yetangjian

正文

文件中引入JavaScript

数据类型

算数运算符

赋值运算符

比较运算符

布尔运算符

用Switch简化多个if...else....

用三目运算符来代替if...else...

字符串

数组

Math对象

Date对象

DOM

Element对象属性

CSS操作

事件处理

鼠标事件

Event事件

键盘事件

表单事件类型

事件代理

定时器

防抖

节流

与JavaScript快速入门（二）相似的内容：

# 热门排行