Web animation speeds up with each use

For an exercise, I'm supposed to create a book that's controlled by the arrow keys and smoothly stops when no keys are held. However, every time I click an arrow key, the animation plays faster and faster.

I'll paste the code below, sorry for not limiting it to the necessary part, but I don't fully comprehend it myself.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
document.addEventListener('keydown', onDocumentKeyDown, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
function onDocumentKeyDown(event) {
event = event || window.event;
var keycode = event.keyCode;
switch (keycode) {
case 38:
tb -= 5;
break;
case 40:
tb += 5;
break;
case 37:
t -= 5;
break;
case 39:
t += 5;
break;
}
}
function onDocumentKeyUp(event) {
event = event || window.event;
var keycode = event.keyCode;
requestAnimationFrame(render);
cube.position.x += 0 * Math.sin(t);
renderer.render(scene, camera);
switch (keycode) {
case 37:
console.log("left up");
break;
case 38:
console.log("up up");
break;
case 39:
console.log("right up");
break;
case 40:
console.log("down up");
break;
}
}
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0xDDDDDD, 1);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, WIDTH / HEIGHT, 0.1, 10000);
camera.position.z = 50;
scene.add(camera);
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
var phongMaterial = new THREE.MeshPhongMaterial({
color: 0xFF0000
});
var cube = new THREE.Mesh(boxGeometry, phongMaterial);
cube.position.x = -25;
cube.rotation.set(0.4, 0.2, 1);
scene.add(cube);
var light = new THREE.PointLight(0xFFFFFF);
light.position.set(-10, 15, 50);
scene.add(light);
var t = 0;
var tb = 0;
function render() {
if (t > 0) t *= 0.98;
if (t < 0) t *= 0.98;
if (t > 0 && t < 0.5) t = 0;
if (t < 0 && t > (-0.5)) t = 0;
if (tb > 0) tb *= 0.98;
if (tb < 0) tb *= 0.98;
if (tb > 0 && tb < 0.5) tb = 0;
if (tb < 0 && tb > (-0.5)) tb = 0;
requestAnimationFrame(render);
if (t != 0) console.log(t);
cube.position.x += 0.1 * t;
cube.position.z += 0.1 * tb;
renderer.render(scene, camera);
}
render();

<!-- language: lang-css -->

body {
margin: 0;
padding: 0;
font-size: 0;
}
canvas {
width: 100%;
height: 100%;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

<!-- end snippet -->

Remove requestAnimationFrame(render) from the key listener. The render function is already running in a loop, so calling it again causes multiple versions of the function to run at the same time. Same goes for calling renderer.render(scene, camera);--this should be called in one place only.

Tip: updating t/tb (these var names could be clearer...) inside the key listener causes unusual behavior when the key retriggers. For more predictable and smooth keyboard action, have the key listeners simply flip booleans for each key on and off and let the rendering loop handle the change to t and tb.

Another general suggestion is to avoid hardcoded values inside your rendering loop. The problem with this is the raw values have no semantic meaning and it becomes error-prone and difficult to change them as the code grows. Ideally, create a configuration object that stores these values in one place with appropriate names (acceleration, damping, etc). I'll leave that as an exercise.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var keyMap = {37: "l", 38: "u", 39: "r", 40: "d"};
var keys = {};
document.addEventListener("keydown", function (e) {
e = e || window.event;
keys[keyMap[e.keyCode]] = true;
}, false);
document.addEventListener("keyup", function (e) {
e = e || window.event;
keys[keyMap[e.keyCode]] = false;
}, false);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0xDDDDDD, 1);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, WIDTH / HEIGHT, 0.1, 10000);
camera.position.z = 50;
scene.add(camera);
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
var phongMaterial = new THREE.MeshPhongMaterial({
color: 0xFF0000
});
var cube = new THREE.Mesh(boxGeometry, phongMaterial);
cube.position.x = -25;
cube.rotation.set(0.4, 0.2, 1);
scene.add(cube);
var light = new THREE.PointLight(0xFFFFFF);
light.position.set(-10, 15, 50);
scene.add(light);
var t = 0;
var tb = 0;
function render() {
if (keys.u) tb -= 5;
if (keys.d) tb += 5;
if (keys.r) t += 5;
if (keys.l) t -= 5;
if (t > 0) t *= 0.98;
if (t < 0) t *= 0.98;
if (t > 0 && t < 0.5) t = 0;
if (t < 0 && t > (-0.5)) t = 0;
if (tb > 0) tb *= 0.98;
if (tb < 0) tb *= 0.98;
if (tb > 0 && tb < 0.5) tb = 0;
if (tb < 0 && tb > (-0.5)) tb = 0;
cube.position.x += 0.1 * t;
cube.position.z += 0.1 * tb;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();

<!-- language: lang-css -->

body {
margin: 0;
padding: 0;
}
canvas {
width: 100%;
height: 100%;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

<!-- end snippet -->