<!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>
<style>
#app{
width:100px;
height: 100px;
border:1px solid #333;
}
</style>
</head>
<body>
<div id="app" draggable="true">
可拖拽
</div>
<script>
/* 单位时间以外,只触发一次,如果在这个单位时间之内多次触发,最终也只会执行一次
走A-DFN 打枪
*/
/*
1、射击游戏中 鼠标事件
2、鼠标的移动距离测算
3、input http 搜索联想
*/
/* 节流:无论你拖拽一个元素多快,事件都会每间隔200ms触发一次 */
/* 节流可以让函数变得平滑 */
let timer = null;
const app = document.getElementById("app");
app.addEventListener("drag",function(e){
if(timer){
return
}
timer = setTimeout(()=>{
console.log(e.offsetX,e.offsetY)
timer = null;
},500)
})
</script>
</body>
</html>
封装节流函数
<!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>
<style>
#app{
width:100px;
height: 100px;
border:1px solid #333;
}
</style>
</head>
<body>
<div id="app" draggable="true">
可拖拽
</div>
<script>
const app = document.getElementById("app");
app.addEventListener("drag",throttle(function(e){
console.log(e.offsetY)
}))
function throttle(fn,delay=500){
let timer=null;
return function(){
// var args = arguments;
// console.log(args);
if(timer){
return
}
timer = setTimeout(()=>{
/* arguments是函数内部的一个对象,接收函数传递过来的参数 */
console.log(arguments)
fn.apply(this,arguments);
timer = null;
},delay)
}
}
</script>
</body>
</html>