BOM对象计时器 location对象 window

博博915

于 2022-08-09 18:05:28 发布

阅读量120

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_56393766/article/details/126249624

版权

笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。

window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。另外，JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象，甚至我们前面介绍的 document 对象也属于 window 对象。

注意：如果 HTML 文档中包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象的同时，为每个框架创建一个额外的 window 对象。

window对象的方法

方法名	用法
alert()	带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
prompt()	显示可提示用户输入的对话框

window 对象中的属性

下表中列举了 window 对象中提供的属性及其描述：

属性名	描述	通过window对象获取方法
history	对History对象的只读引用	window.history
location	对Location对象的只读引用	window. 1ocation
navigator	对 Navigator对象的只读引用	window.navigator
screen	对Screen对象的只读引用	window.screen

window 对象——BOM核心

window，顾名思义，窗口对象。它表示整个浏览器窗口，主要用来操作浏览器窗口。同时， window对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。

　　弹框类的方法。前面省略window

　　　　alert('提示信息')

　　　　confirm("确认信息")

　　　　prompt("弹出输入框")

　　　　open("url地址"，“_black或_self”，“新窗口的大小”）

　　　　close() 关闭当前的网页

　　定时器，清除定时器。

　　　　setTimeout(函数，时间) 只执行一次

　　　　clearTimeout(定时器名称) 清除定时器，用于停止执行setTimeout()方法的函数代码。

　　　　setInterval(函数，时间) 无限执行

　　　　clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

document 对象

它是window对象的一个属性，可以用来处理页面文档

location 对象

对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

　　window.location 对象在编写时可不使用 window 这个前缀。一些例子：

　　location.herf = 'url地址'

　　location.hostname 返回 web 主机的域名

　　location.host返回 web 主机的端口

　　location.assign()可以打新的页面，并且可以返回可以产生记录的

location.reload()时间页面刷新

location.replace("https://www.baidu.com/")用新文档替换当前的文档可以实现打开新的页面但不能返回故眉头产生历史记录

计时器

setTimeout()：一次性计时器；
setInterval()：连续计时器；

防止抖动：

函数防抖是指对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时。
思路：利用计时器setTimeout和clearTimeout，只要触发事件，就会销毁上一次的计时器，重新计时，计时结束后才会触发回掉函数的事件。
适用于:
表单组件输入内容验证；
防止多次点击导致表单多次提交等情况；
防止函数过于频繁的不必要的调用。

比如一个提交按钮，用户多次点击，然后计时器就会不断被销毁又重新创建，直到用户停止点击并且时长达到计时器时间，然后再执行提交事件。

setTimeout()：一次性计时器；

<body>
    <input type="text" name="" id="username">
    <script>
        //防抖
        var timer
        username.oninput=function(){
            clearTimeout(timer)
            timer=null
           timer = setTimeout(function(){
                console.log("aaa");
            },2000)
        }
    </script>
</body>

setInterval()：连续计时器；

<body>
    <input type="text" name="" id="username">
    <script>
      //节流
      var timer = null
        username.oninput=function(){
            if(timer==true){
                return
            }
            timer= setTimeout(function(){
                console.log("aa");
                timer=null
            },2000)
        }
    </script>
</body>