1.系统对话框
confirm()
确认框通过调用 confirm()来显示。确认框跟警告框类似,都会向用户显示消息。但不同之处在于,确认框有两个按钮:“Cancel”(取消)和“OK”(确定)。
<script>
var result = confirm('你确定吗?');
if (result) {
console.log('确定');
}else{
console.log('取消');
}
</script>
prompt()
提示框,通过调用 prompt()方法来显示。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按钮,提示框还会显示一个文本框,让用户输入内容。prompt()方法接收两个参数:要显示给用户的文本,以及文本框的默认值(可以是空字符串)。
<script>
var result = prompt("你是谁?");
if (result) {
console.log(result);
}else{
console.log('取消');
}
</script>
2.history对象
该对象保存着用户上网的历史记录。出于安全方面的考虑,开发人员无法得知用户浏览过的URL,不过借由用户访问过的页面列表,同样可以在不知道实际URL的情况下实现后退前进。
history对象主要有三个方法:
back()
加载 history 列表中的前一个 URL
forward()
加载 history 列表中的下一个 URL
go()
加载 history 列表中的某个具体页面,负数表示向后跳转,正数表示向前跳转。
3.间歇调用和超时调用
setTimeout()
该方法返回一个数值ID,表示超时调用,这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID)来清除,以下代码表示打印之后一秒过后清除
<script>
var id = setTimeout(() => {
console.log('Hello World');
}, 1000);
console.log(id);
// 清除超时调用
clearTimeout(id);
</script>
setInterval()
按照指定的时间间隔重复执行代码,直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID,该ID可以用户在将来某个时刻取消间歇调用。
<script>
var div = document.createElement('div');
// 间歇调用
var id = setInterval(() => {
div.innerHTML = new Date().toLocaleString();
}, 1000);
document.body.appendChild(div);
// 清除计时器
clearInterval(id);
</script>
4.防抖和节流
防抖和节流的方式可以减少调用频率但不影响实际效果
函数防抖
定义是单位时间内频繁触发事件,以最后一次触发为准。那么怎么实现防抖呢?
首先要声明一个全局变量来存储定时器ID,每次触发都清除上一次的定时器再开启本次定时器
<input type="text" name="" id="inp">
<script>
//输入框事件
//声明全局变量存储定时器ID
var timeID = null
// 获取输入框节点
var inp = document.getElementById('inp')
// 输入框输入事件
inp.oninput = function () {
//1.先清除之前的定时器
clearTimeout(timeID)
//2.开启本次定时器
timeID = setTimeout(() => {
console.log(`输入的内容是${this.value}`)
}, 500)
}
</script>
函数节流
单位时间频繁触发一个事件只会触发一次
实现方法:
先声明一个全局变量存储触发事件,每一次触发事件都获取当前时间,然后判断当前时间与上一次触发事件是否超过时间间隔,超过就执行事件处理代码,最后存储本次触发的时间
<button id="btn">点击</button>
<script>
//声明一个全局变量存储触发时间
let lastTime = null
// 获取按钮节点
var btn = document.getElementById('btn')
//页面滚动事件
btn.onclick = function () {
//1.每一次触发 先获取本次时间戳
let currentTime = Date.now()
//2.判断当前时间 与 上次触发时间 是否超过间隔
if (currentTime - lastTime >= 3000) {
console.log(this.innerHTML)
//3.存储本次的触发时间
lastTime = currentTime
}
}
</script>