<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 20px auto;
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="dv"></div>
<script>
const dv = document.getElementById('dv')
/*
封装节流函数
*/
function throttle(callBack, time) {
// callBack: 传入的回调函数
// time: 定时器的第二个参数（多长时间触发）
// 节流阀的状态（默认开启）
let valve = true
return function () {
// 如果节流阀处于关闭状态，则不执行里面代码
if (valve) {
// 关闭节流阀（在里面代码没执行完之前，不能进入）
valve = false
// 开启定时器
setTimeout(() => {
// 通过 apply 改变传入的回调函数 callBack 的 this 指向
// 通过 arguments 拿到外层函数的事件对象（箭头函数没有 this 指向）
// 注意：事件处理函数只能有一个形参（拿到事件对象），
// 如果要传多个参数，方法:在外面封装一个函数，在事件处理函数中调用
callBack.apply(this, arguments)
// 当回调函数执行完，开启节流阀（可以执行进入里面执行传入的回调函数了）
valve = true
}, time)
}
}
}
dv.onmousemove = throttle(function (e) {
this.innerHTML = `x的坐标为${
e.pageX},y的坐标为${
e.pageY}`
}, 600)
</script>
</body>
</html>
封装节流（throttle）函数
猜你喜欢
转载自blog.csdn.net/weixin_46611729/article/details/112794536
今日推荐
周排行