纯JavaScript阻止键盘输入/单击，直到计时器用完

我是StackOverflow新手，但我经常来这里学习和理解一些Javascript/Reactjs的东西

我制作了一个脚本，用来更改元素的图像、文本和描述，并且我能够得到一个淡入/淡出脚本，使对象淡出，添加其他新项目，然后淡入。 问题是，当您多次单击按钮/按箭头键时，会导致淡入淡出效果，并跳过项目

我尝试创建一个每隔毫秒运行一次preventDefault（）的函数，但是如果将preventDefault放在函数内部，它会给出一个错误，它无法阻止undefined的默认值，如果将其作为外部函数运行（如示例中所示），它将忽略preventDefault（）并运行控制台调试

代码：

我试着在Google和Stack上搜索，看看是否还有其他人有类似的问题，但我似乎能找到任何东西。它必须是纯JavaScript的，因为我用Reactjs创建页面，互联网上的每个人都告诉你不要使用jQuery或其他库

如果不能做到这一点，我知道另一种方法来实现这一点，但我将无法使用键盘输入，这将是不有趣的

编辑：有人在一次不和谐的聊天中向我指出，如果有if语句，可以使用变量阻止脚本运行。我能够通过添加一个'canPress'let并在if语句中添加if canPress==true run来让代码正常工作

代码：

---

React不太热衷于直接操纵DOM。我建议使用UseState和UseEffect挂钩研究并提出解决方案

例如，一种方法是：

使用useState钩子初始化加载状态

然后使用useEffect钩子，您可以监听关键事件

然后使用handleKey函数运行程序，等等

然后在实际的组件体中，您只需使用加载状态设置一个三元，以确定组件的视图

---

顺便说一句，这并不完美，但可以作为一个很好的起点。我强烈建议跳入水中

React并不热衷于直接操作DOM。我建议使用UseState和UseEffect挂钩研究并提出解决方案

例如，一种方法是：

使用useState钩子初始化加载状态

然后使用useEffect钩子，您可以监听关键事件

然后使用handleKey函数运行程序，等等

然后在实际的组件体中，您只需使用加载状态设置一个三元，以确定组件的视图

---

顺便说一句，这并不完美，但可以作为一个很好的起点。我强烈建议跳入水中

实际上，我在react代码中使用了useffect钩子，但是当安装时，这段代码会加载到DOM中。我在几年前编写了这个javascript文件，其中还有许多其他函数，我不想把React代码弄得乱七八糟。实际上，我在React代码中使用了useEffect钩子，但在安装时，这些代码会加载到DOM中。我在几年前写过这个javascript文件，除了这个，它还有很多其他的函数，我不想让我的代码乱七八糟。

function preventContinuence(func, time) {
    if (!(time) || !(func) || !(isNaN(time))) {
        var i = time;

        setInterval(function() {
            i--;
            if (i > 0) {
                func;
                console.log(i); //debug
            } else {
                clearInterval();
            }
        }, 1)
    } else {
        console.error('You did not include a function/time or the time is not an integer/float'); //This doesn't work... but it's not important.
    }
}

document.addEventListener('keydown', function(e) {
    if (modal.style.opacity == '1') {
        switch (e.keyCode) {
            case 37:
                preventContinuence(e.preventDefault(), 800)
                FX.fadeOut(glryImg, {
                    duration: 400
                })
                setTimeout(() => {
                    document.getElementById('glryImg').src = prevItem();
                    document.getElementById('imgTitle').textContent = title();
                    document.getElementById('imgDesc').textContent = description();
                    FX.fadeIn(glryImg, {duration: 400})
                }, 400)
                break;
    } else {return}
})

let canPress = true;

document.addEventListener('keydown', function(e) {
    if ((modal.style.opacity == '1') && (canPress == true)) {
        switch (e.keyCode) {
            case 37:
                canPress = false
                preventContinuence(e.preventDefault(), 800)
                FX.fadeOut(glryImg, {
                    duration: 400
                })
                setTimeout(() => {
                    document.getElementById('glryImg').src = prevItem();
                    document.getElementById('imgTitle').textContent = title();
                    document.getElementById('imgDesc').textContent = description();
                    FX.fadeIn(glryImg, {duration: 400})
                }, 400)

                setTimeout(() => {canPress = true}, 800)
                break;
    } else {return}
})

const [loading, setLoading] = useState(false)

useEffect(() => {
  window.addEventListener("keydown", handleKey);
});

const handleKey = (e) => {
  const arrow = e.keyCode === 37 || e.keyCode === 39
  if (arrow && !loading) {
    setLoading(true)
    // Do some stuff . . . 
    setLoading(false)
    }
  }