纯javaScript打造行走的jack——键盘事件的侦听——防抖和节流的区别
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯javaScript打造行走的jack——键盘事件的侦听——防抖和节流的区别相关的知识，希望对你有一定的参考价值。
键盘事件的侦听
行走的jack
<!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>
div
width: 32px;
height: 32px;
background-image: url(./img/Actor01-Braver03.png);
position: absolute;
left: 0;
top: 0;
</style>
</head>
<body>
<div class="actor"></div>
<script>
var actor;
var x=0,y=0,speed=3,n=0;
init();
function init()
actor=document.querySelector(".actor");
document.addEventListener("keydown",keyHandler);
function keyHandler(e)
n++;
if(n>3)n=0;
switch(e.keyCode)
case 37:
x-=speed;
actor.style.backgroundPositionY="-33px";
break;
case 38:
y-=speed;
actor.style.backgroundPositionY="-99px";
break;
case 39:
x+=speed;
actor.style.backgroundPositionY="-66px";
break;
case 40:
y+=speed
actor.style.backgroundPositionY="0px";
break;
actor.style.backgroundPositionX=n*-32+"px";
actor.style.left=x+"px";
actor.style.top=y+"px";
</script>
</body>
</html>
防抖和节流的区别
抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行
防抖(debounce):
- 防抖触发高频率事件时n秒后只会执行一次,如果n秒内再次触发,则会重新计算。
- 概述:每次触发时都会取消之前的延时调用。
节流(thorttle):
- 高频事件触发,每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法。
- 概述:每次触发事件时都会判断是否等待执行的延时函数。
区别:降低回调执行频率,节省计算资源。
函数防抖一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。
// 最大间隔时间
const MAX_TIME=10;
var actor,direction;
// list [1,3,2,0] 就是精灵图 中左上右下对应的精灵图y轴位置
// time 初始设置的间隔时间
var x=0,y=0,speed=2,list=[-33,-99,-66,0],n=0,time=MAX_TIME;
init();
function init()
// 获取小人div
actor=document.querySelector(".actor");
// 按下键时触发事件
document.addEventListener("keydown",mouseHandler);
document.addEventListener("keyup",mouseHandler);
// 开启动画
setInterval(animation,16);
function mouseHandler(e)
// 如果释放键时，direction 被设置为undefined
if(e.type==="keyup") return direction=undefined;
// keyCode 37,38,39,40 -37 -->0,1,2,3
// list[0]-->左方向精灵图的y周位置
// list[1]-->上方向精灵图的y周位置
// list[2]-->右方向精灵图的y周位置
// list[3]-->下方向精灵图的y周位置
direction=list[e.keyCode-37];
// 如果没有取到值，说明按下的键不是上下左右,如果一直按下重复时跳出
if(direction===undefined || e.repeat) return;
// 并且改变角色的方向
actor.style.backgroundPositionY=direction+"px";
function animation()
// direction是undefined在没有按下键或者释放键时
if(direction===undefined) return;
// 角色走动
actorMove();
actorChange();
// 角色走动
function actorMove()
// 根据方向，设置x和y做前进还是后退
if(direction===-33)x-=speed;
else if(direction===-66) x+=speed;
else if(direction===-99) y-=speed;
else y+=speed;
// 设置角色的位置
actor.style.left=x+"px";
actor.style.top=y+"px";
function actorChange()
// 每次进入让time--，如果不是0，就跳出
if(--time) return;
// 如果是0就进入，并且重设为最大间隔时间
time=MAX_TIME;
// 这就意味着这个函数每间隔最大间隔次数进入一次，有效的放置连续快速的执行
// 可以让代码执行次数降低，这种先判断延迟后执行的方式叫做防抖
// 根据n变化，切换精灵图横向的位置
n++;
if(n>3) n=0;
actor.style.backgroundPositionX=n*-32+"px";
以上是关于纯javaScript打造行走的jack——键盘事件的侦听——防抖和节流的区别的主要内容，如果未能解决你的问题，请参考以下文章
使用纯 Javascript 隐藏默认日期选择器 UI [重复]
纯JavaScript入门级小游戏：兔子抢金币（附演示地址+源码）