window.history;window.location;window.navgator;window.screen;只能读写不能写入。
location对象
打开新的页面:assign()
页面刷新:reload();
用新文档替换旧文档:replace();也可以打开新页面,但是不能返回。
获取主机名和端口号:location.host;
History对象
location.href:跳转到指定的页面;
history.back():后退到上一个页面;
history.forward():可以跳转到点击过的(因为点击过会生成一个历史记录,跳转到历史记录列表的笑一个url)下一个页面。
history.go():正值向后跳转,负值向前跳转。
浏览器事件对象
onload():页面加载时触发;
onscroll():浏览器的滚动条拖动时触发;
onresize():窗口的大小改变时触发;
节流和防抖
防抖:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间
<!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>
<input type="text" id="btn">
<script>
var timer;
btn.oninput = function() {
clearTimeout(timer);
time = setTimeout(function() {
console.log("aa");
}, 2000)
}
</script>
</body>
</html>
会在两秒后才开始运行内容,文本框里有多少内容就运行多少次。
节流:指的是某个函数在一定时间间隔内(例如 3 秒)只执行一次,在这 3 秒内产生函数调用请求直接无视,也不会延长时间间隔。
<!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>
<input type="text" id="btn">
<script>
var timer = null;
btn.oninput = function() {
if (timer) {
return
}
timer = setTimeout(function() {
console.log("aa");
timer = null;
}, 2000)
}
</script>
</body>
</html>
也是会在两秒后进行运行,但是不同的是只会接受一次。