神奇的textarea中的keyup-keydown优化术

在RT.cn上,有一个神奇的发推框,它的作用和新浪微博的发微博的作用一样。
在JS上为这个发推框加了一个@功能,就是在你按下@键之后,会在当前光标位置显示你想@的人的列表。

思路大体是这么做的:

$textarea.keydown(function(e){
if(e.keyCode==keyMap.ENTER){
insertUserAtCaret();
return false;
}
});
$textarea.keyup(function(e)){
checkShowUserList();
}

也就是在keyup的时候去判断最后一个字符是不是@,如果是@,那么就显示找到的用户名。

貌似很理想,但在ie6、ie7、ie8等弱智浏览器上,有严重的性能问题——打字很卡。对insertUserAtCaret()和checkShowUserList()已经做了充分的优化。但感觉还是非常卡。

如何优化?

哥苦想半个月之后,今天突然有了灵感。如果怀疑在keyup/down事件中判断最后是否输入了@符号有性能问题,那就不用keyup/down事件来触发吧。于是就把keyup事件改成了这段神奇的代码:

var timer;
$textarea.focusin(function(){
timer = setInterval(function(){
checkShowUserList()
}, 300);
});
$textarea.blur(function(){
clearInterval(timer);
});

然后测试,令人泪奔的事情发生了……不卡了……

这是一个神奇的代码啊。。

Copyright © 2011. All Rights Reserved.

《神奇的textarea中的keyup-keydown优化术》有3个想法

    1. 倒不是网络请求的问题,原先的逻辑中已经有判断说@符号的时候才去ajax取其信息。没有@符号时候的keyup/keydown一样很卡。我对JS没有非常深入的研究,愿闻其详啊~

发表评论

电子邮件地址不会被公开。 必填项已用*标注