js keydown 重复

基础概念

keydown 事件是 JavaScript 中的一个键盘事件，当用户按下键盘上的任意键时触发。与 keypress 和 keyup 事件不同，keydown 事件在按键被按下时立即触发，并且在按键保持按下状态时会重复触发。

类型与应用场景

类型

一次性触发：按键被按下后立即释放。
重复触发：按键保持按下状态时，事件会周期性触发。

应用场景

游戏控制：在游戏中，玩家持续按住某个键来实现角色的持续移动或攻击。
文本编辑器：在文本编辑器中，用户可以连续按住某个键来输入多个相同的字符。
快捷键操作：实现各种快捷键组合，提升用户体验。

遇到的问题及原因

问题描述

在某些情况下，开发者可能会遇到 keydown 事件重复触发过于频繁的问题，导致程序性能下降或行为异常。

原因分析

浏览器默认行为：不同浏览器对 keydown 事件的重复触发频率有不同的默认设置。
代码逻辑问题：如果事件处理函数中包含复杂的逻辑或耗时操作，可能会导致性能瓶颈。

解决方案

1. 使用 `event.repeat` 属性

event.repeat 属性可以用来判断当前触发的 keydown 事件是否是由于按键重复导致的。如果是重复触发，可以选择跳过某些操作。

document.addEventListener('keydown', function(event) {
    if (event.repeat) {
        // 如果是重复触发，可以选择跳过
        return;
    }
    // 处理首次触发的逻辑
    console.log('Key pressed:', event.key);
});

2. 设置时间间隔

通过设置一个时间间隔，限制 keydown 事件的处理频率，避免过于频繁的触发。

let lastKeyPressTime = 0;
const debounceTime = 100; // 设置时间间隔为100毫秒

document.addEventListener('keydown', function(event) {
    const currentTime = new Date().getTime();
    if (currentTime - lastKeyPressTime > debounceTime) {
        lastKeyPressTime = currentTime;
        // 处理按键逻辑
        console.log('Key pressed:', event.key);
    }
});

3. 使用防抖（Debounce）或节流（Throttle）

防抖和节流是两种常用的优化高频事件处理的方法。

防抖（Debounce）：在事件被触发后，等待一段时间，如果在这段时间内没有再次触发事件，则执行处理函数。

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

document.addEventListener('keydown', debounce(function(event) {
    console.log('Key pressed:', event.key);
}, 100));

节流（Throttle）：在一段时间内只执行一次事件处理函数。

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

document.addEventListener('keydown', throttle(function(event) {
    console.log('Key pressed:', event.key);
}, 100));

通过以上方法，可以有效控制 keydown 事件的重复触发频率，提升程序的性能和稳定性。