按键时设置超时会影响性能吗?
在另一个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操作更重的任务时。
相关文章