JS基础知识day9

定时器  

        语法 : setInterval(fn , time)

        变量存储的是一个数字（页面当中的第几个定时器）

        定时器是异步的

        清除定时器  clearInterval(第几个定时器)

        存储定时器的变量必须在点击事件外面声明 -> 也就是说他必须是一个全局变量

        定时器：重复的闹钟

        延时器：一次性的闹钟

 延时器  可以当做定时器来使用   写递归

        不做区分(编号,清除)

        bug  定时器叠加

           解决：

               1 每次点击的时候，先清除，再启动定时器 --- 保证只有一个定时器

               2 点完之后禁用，一段时间之后(事情完成以后)解除禁用   --- 验证码60s倒计时

        setTimeout(fn , time)

        变量存储的是第几个闹钟(不分定时器和延时器)

        setTimeout 也是异步  

        clearInterval 可以清除定时器，也可以清除延时器

        clearTimeout  可以清除延时器，也可以清除定时器

JS 单线程的语言

          代码正常从上往下执行

         但是有一些特殊的功能：异步

          图片的请求，数据的请求 --- 需要服务器响应(需要时间的)

          定时器和延时器以及点击事件  -- 不是立即执行的(需要时间，或者需要用户)

异步：

          在点击事件里面，绑定是同步的，事件处理函数是异步的

          在定时器里面，要做的事情是异步的

js的所有代码都在主线程上执行

          同步先执行

          异步存放在任务队列中(任务队列不能执行任务,而是任务到时间了之后去主线程上执行)

---

JS的三大组成部分

ECMAScript  /  BOM  /  DOM

        BOM:browser object model  浏览器对象模型

        DOM:document object model  文档对象模型

DOM会有延迟

            页面在获取焦点的时候，会优先使用现有的资源

            而失去焦点的页面的资源会延后---不等于不处理

BOM:浏览器对象模型

          每个浏览器窗口都是一个window对象

        var window = new Window()   在每一次打开一个页面的时候默认就创建了一个window对象

        每一个页面不共享window

        每次创建的全局变量和函数都是属于window对象的属性和方法

BOM常见属性

          navigator

              userAgent 会详细的显示浏览器的版本信息

          location 地址栏

              href  整个网址

              host  域名+端口号

              hostname  域名

              port  端口号

              protocal  协议 (http / https)

              search 问号后面的一串   表单提交的数据

              hash   井号后面的一串  锚点

              assign()  跳转至新的页面

              replace()  替换当前页面  --- 不会被历史记录

              reload()  刷新页面

          history  历史记录

              length 在同一个窗口打开过几个页面

              forward()  前进

              back()  后退

              go(1 / -1) 可进可退

          document  文档    DOM实际上是BOM的一部分

console.log(navigator);

        console.log(navigator.userAgent);


        function sheBei() {  
            if(navigator.userAgent.includes('iPhone')) {
                // console.log('使用的是苹果手机');
                // 处理对应的兼容问题
                document.body.background = 'black' ;
                return 
            }
            if(navigator.userAgent.includes('Android')) {
                // console.log('使用的是安卓手机');
                
                return 
            }
            if(navigator.userAgent.includes('win64')) {
                // console.log('使用的是window系统的电脑');
               
            }

        }




        console.log(location);


        setTimeout(function () {  
            //获取或者设置新的地址
            location.href = 'http://www.baidu.com'
            location.search = '?username=yy&password=123'
            //设置新的地址
            location.assign('http://www.baidu.com')


            //替换新的地址  --- 替换了所有的历史记录
            location.replace('http://www.baidu.com')

        },3000)


        location.reload()


        console.log(window);

BOM方法

//  open()  打开新的浏览器窗口    网页重定向(默认被拦截)
        //  close() 关闭本窗口


        setTimeout(function () {  
            // 打开一个新的窗口 --- 网页重定向(默认被拦截)
            // open('http://www.baidu.com')
            close()
        },3000)

BOM事件

        load事件：等待页面资源加载完毕之后执行

        scroll 页面滚动时触发这个事件   --- 高频率触发的事件

        resize 窗口大小大声改变时触发此事件 --- 高频率触发的事件

onscroll / onresize 是高频率触发事件

函数的防抖和节流

             干啥的？  解决高频率触发事件

 

        函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 --- 每次点击，就重做

        函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。 --- 点击一次，就把事情干完，没干完之前点击没用

       

             点了一次之后，一段时间不能再点，事情干完之后可以再点   函数节流

             点了以后立即清除定时器   函数防抖

// 函数防抖举例：
        var t ;
        window.onscroll = function () { 
            clearTimeout(t) ;
            t = setTimeout(function () {  
                console.log(888);
            },300)
        }

// 函数节流距举例
// var oBtn = document.getElementById('btn') ;
        // oBtn.onclick = function () {  
        //     oBtn.disabled = true ;
        //     var count = 6 ;
        //     oBtn.innerHTML = count + 's之后可以再次点击'
        //     var t = setInterval(function () {  
        //         count-- ;
        //         oBtn.innerHTML = count + 's之后可以再次点击'
        //         if(count <= 0) {
        //             clearTimeout(t) ;
        //             oBtn.disabled = false ;
        //             oBtn.innerHTML = '获取验证码'
        //         }
        //     },1000)
        // }


var oBtn = document.getElementById('btn') ;
        var flag = true ;   // 判断可不可以点击
        oBtn.onclick = function () {  
            if(flag) {
                flag = false ;
                var count = 6 ;
                oBtn.innerHTML = count + 's之后可以再次点击'
                var t = setInterval(function () {  
                    count-- ;
                    oBtn.innerHTML = count + 's之后可以再次点击'
                    if(count <= 0) {
                        clearTimeout(t) ;
                        flag = true
                        oBtn.innerHTML = '获取验证码'
                    }
                },1000)
            }
        }