按键时设置超时会影响性能吗？ [英] Can setTimeout on KeyDown affect performance?

问题描述

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

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

代码为每个单独的Keydown事件使用setTimeout函数。我在一个用户通常输入超过1000个单词的页面上使用它。(我假定为4K-5K字符)

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

    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，4 GB内存，Windows 10)上试用了这个代码。我注意到，如果我继续使用这个页面，它就可以正常工作。但如果我使用Alt + Tab将窗口切换到其他应用程序，并在大约5-7秒内返回到我的站点的浏览器，快捷键将停止工作。

我可以确认此行为是一致的，并且现在可以在多台Windows 10计算机上重现。

推荐答案

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

这很好，但如果您使用更长的超时时间，例如10s，并且您的速度是10个字母/秒，那么您将有100个函数同时运行，这是不合适的。

尤其是当您尝试执行比更改类和一些DOM操作更重的任务时。

这篇关于按键时设置超时会影响性能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！