按键时设置超时会影响性能吗?

在另一个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操作更重的任务时。

相关文章