Bom浏览器对象模型节流和防抖

BOM对象大致包括五个部分

Window对象: 浏览器窗口对象

Navigator: 浏览器对象

Screen: 浏览器所处客户端的显示器屏幕对象

History: 浏览器当前窗口的访问历史记录对象

Location: 浏览器当前窗口的地址栏对象

每个对象都有对应的属性和方法,通过这些属性和方法我们可以获取到浏览器的信息,在这五个部分中,Window对象尤为重要,根据图片的区域划分,可以很清楚的看出,Window对象其中就包含了History,Location对象,还有一个非常重要的Document对象,称为DOM对象

windows窗口对象

打开窗口、关闭窗口

window.open("www.baidu.com") 打开一个新的窗口/指定窗口

window.close() 关闭一个窗口

var newPage;    //存储打开窗口
element.onclick=function(){
    newPage = window.open("https://www.baidu.com")  //打开指定窗口
}
element.onclick=function(){
    newPage.close() //关闭指定窗口
}

定时器

setTimeout() 在指定的毫秒数后调用函数或计算表达式（只执行一次）

clearTimeout() 取消由setTimeout()方法设置的事件

setInterval() 按照指定时间周期来调用函数或计算表达式（多次）

clearInterval() 取消由setInterval()方法设置的事件

var toggleImg = setInterval(function(){
    console.log(1);
}, 1000);
clearInterval(toggleImg)

window对象的属性

history 对history对象的只读引用 window.history

location 对location对象的只读引用 window.location

navigator 对Navifator对象的只读引用 window.navigator

screen 对Screen对象的只读引用 window.screen

Location对象

location.assign() 加载新的文档

location.reload() 重新加载当前文档

location.replace() 用新文档替换当前文档

element.onclick = function(){
    location.assign("https://www.baidu.com")    //打开新页面 产生记录
}
element.onclick = function(){
    location.reload()   //刷新页面
}
element.onclick = function(){
    location.replace("https://www.baidu.com")   //替换当前文档 实现打开新页面功能 不可以返回
}
element.onclick = function(){
    location.href("https://www.baidu.com")  //打开新页面 产生记录
}

location属性

location.host 获取端口号

location.hostname 只获取主机名

location.href 获取url地址

history对象

history.back() 加载当前history列表前一个url

history.forward() 加载当前history历史记录列表下一个url

history.go() 加载当前history列表中具体页

go(1)前进1页

go(-1)后退1页

浏览器事件对象

window.onload() 对象装载完成后触发

window.onscroll() 窗口滚动条被拖动时触发

window.onresize() 窗口的大小改变时触发

body.clientWidth 获取窗口的宽度

防抖和节流

在进行窗口的resize、scroll、输出狂内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差，那么为了前端性能的优化，也为了用户更好的体验，就可以采用防抖和节流的方式来达到这种效果，减少调用的频率。

防抖是指当一个动作连续触发，只执行最后一次，好比如打王者荣耀的时候，按下了回城键在等待几秒钟之后，就会执行回城事件，但当你再次按下回城键，回程时间又将重新计时。

节流是指一定时间内js方法只跑一次，比如打王者荣耀时，释放技能都有一段冷却时间，假如一技能冷却时间由5秒，那么在5秒时间内只能释放一次一技能

防抖

防抖:连续触发事件,只执行最后一次

思路：

每次触发时重新开始计时

var time;
element.oninput =function(){
    clearTimeout(timer)
    timer = setTimeout(function(){
        console.log(1)
    },1000)
} 

节流

每多少秒进行重新加载

思路：

先判断有无定时器，则返回return

把逻辑代码那放到定时器中

定时器到之后，置空定时器变量即可

var timer = nul
element.oninput = function(){
    if(timer){
        return
    }
    timer = function(){
        console.log(aa)
        timer=null
    },1000}