当前位置：首页 > JavaScript

js实现连打

2026-02-02 10:07:10JavaScript

实现连打功能的方法

在JavaScript中实现连打功能（即连续快速触发同一事件）可以通过监听键盘事件并记录按键状态来实现。以下是两种常见的方法：

监听键盘事件

通过监听keydown和keyup事件来判断按键是否被持续按下：

let isKeyPressed = false;

document.addEventListener('keydown', (e) => {
    if (e.key === 'Space' && !isKeyPressed) {
        isKeyPressed = true;
        // 开始连打
        startContinuousAction();
    }
});

document.addEventListener('keyup', (e) => {
    if (e.key === 'Space') {
        isKeyPressed = false;
        // 停止连打
        stopContinuousAction();
    }
});

function startContinuousAction() {
    // 设置定时器模拟连打
    const intervalId = setInterval(() => {
        if (!isKeyPressed) {
            clearInterval(intervalId);
            return;
        }
        console.log('连打中...');
        // 执行连打动作
    }, 100); // 调整间隔时间控制连打速度
}

function stopContinuousAction() {
    // 清理逻辑
}

使用`setInterval`模拟连打

通过定时器模拟连打效果，适用于需要自动触发的场景：

let intervalId = null;

function startContinuousAction() {
    if (intervalId) return;
    intervalId = setInterval(() => {
        console.log('连打中...');
        // 执行连打动作
    }, 100);
}

function stopContinuousAction() {
    if (intervalId) {
        clearInterval(intervalId);
        intervalId = null;
    }
}

// 绑定到按钮或其他触发条件
document.getElementById('startButton').addEventListener('click', startContinuousAction);
document.getElementById('stopButton').addEventListener('click', stopContinuousAction);

优化连打体验

防抖与节流

如果连打事件可能频繁触发，可以使用节流（throttle）或防抖（debounce）优化性能：

function throttle(func, delay) {
    let lastCall = 0;
    return function(...args) {
        const now = new Date().getTime();
        if (now - lastCall < delay) return;
        lastCall = now;
        return func.apply(this, args);
    };
}

const throttledAction = throttle(() => {
    console.log('节流连打...');
}, 200);

动态调整连打速度

通过变量控制连打间隔，实现加速或减速效果：

let speed = 200;
function adjustSpeed(newSpeed) {
    speed = newSpeed;
    if (intervalId) {
        stopContinuousAction();
        startContinuousAction();
    }
}