KeyDown 上的 setTimeout 会影响性能吗？

Posted 2023-03-29

【中文标题】KeyDown 上的 setTimeout 会影响性能吗？

【英文标题】：Can setTimeout on KeyDown affect performance?

【发布时间】：2021-11-05 18:16:50

【问题描述】：

在 Stack Overflow 成员的帮助下，我获得了使用 Keydown 设置快捷方式的代码。

How to Check if jQuery .keydown() has any other keys pressed or not?

代码对每个 keydown 事件使用 setTimeout 函数。我在用户通常输入超过 1000 个单词的页面上使用它。 （我假设 4k-5k 个字符）

这意味着 Keydown 将在所有这些 5k 按键上运行，并且新的超时将启动多次。

    var NewKeys = ;
    var NewTimeout;
    jQuery(document).keydown(function (e) 
        if (NewTimeout) 
            clearTimeout(NewTimeout);
        
        NewKeys[e.which] = true;
        NewTimeout  = setTimeout(function () 
            if (typeof NewKeys[17] !== "undefined"  && typeof NewKeys[83] !== "undefined"  && Object.keys(NewKeys).length === 2)  
                e.preventDefault();
                if(!jQuery('.SearchCreations').hasClass('Show'))
                    e.preventDefault();
                    jQuery('.SaveCreation').click();
                
            
            if (typeof NewKeys[27] !== "undefined" && Object.keys(NewKeys).length === 1)  
                jQuery('.Thumbnail.Close').click();
                jQuery('.Action').removeClass('Collapse');
            
            if (typeof NewKeys[16] !== "undefined" && typeof NewKeys[17] !== "undefined"  && typeof NewKeys[83] !== "undefined"  && Object.keys(NewKeys).length === 3) 
                e.preventDefault();
                if(jQuery('.CreationEditor').hasClass('Autosaving'))
                    jQuery('.StopSave').click();
                
                else
                    jQuery('.AutoSave').click();
                
            
          , 200);
    );

这会影响最终用户的性能/可靠性吗？

您最不想做的就是拥有一个资源密集型网页，以至于您的用户的设备无法正常工作。

我在 6-7 岁的笔记本电脑（i5、4GB RAM、Windows 10）上尝试了此代码。我注意到，如果我继续使用该页面，它可以正常工作。但是，如果我使用 Alt + Tab 将窗口切换到其他应用程序并在大约 5-7 秒后返回浏览器到我的站点，则快捷键将停止工作。

可以确认此行为是一致的，并且到目前为止可以在多台 Windows 10 机器上重现。

【问题讨论】：

通过在开发工具中运行一些性能配置文件并添加侦听器并省略侦听器，应该相对容易测试。如需更多上下文，为什么您要这样做？也许您无意中陷入了存在更好方法的反模式？是否有任何理由您不能实现某种形式的节流、去抖动或批处理，以便在运行较少离散超时的情况下实现相同的效果？

对。好吧，我想开发工具只检查我机器上的性能。最后，快捷方式在多台中等规格的机器上停止工作。 （错误是可重现的）。至于更好的方法，我找不到任何关于在 jquery 中实现 REAL 快捷方式的信息......请参阅我在问题中链接的另一个问题，以了解为什么这是我在互联网上找到的唯一方法。

【参考方案1】：

这在很大程度上取决于您的超时值以及您的打字速度。例如，您的超时时间为 3，而您在一秒钟内键入 5 个字母。然后你会得到 15 个同时运行的函数。

没关系，但是当你使用更长的超时时间，比如可能 10 秒，而你的速度是 10 个字母/秒，那么你将有 100 个函数同时运行，这是不合适的。

特别是如果您尝试执行比更改类和一些 DOM 操作更繁重的任务。

【讨论】：

嗯，我的网站上目前的用户范围很广，显然每个人的打字速度都不同。我绝对知道的是，当我使用 Alt + Tab 移动到其他窗口时，键盘快捷键会在我测试的每台笔记本电脑中停止运行，这也包括打字速度非常慢的时间。是的，如代码所示，超时设置为 200 = 0.2s