文本字段计数器很落后
我创建了一个在 JQuery 库中使用的字符计数器，其效果与 Twitter 计数器（剩余字符计数器）类似。然而，我注意到至少 FireFox 在处理它时遇到了困难（其他浏览器显示出一些压力，但没有那么糟糕）。基本上，当以稳定的速度打字时，它会开始“追赶”，甚至使浏览器没有响应，直到它追上。当在 Twitter 的文本框中尝试相同的打字速度时，它根本没有减慢！
虽然我确实有一个自动调整大小插件来监视此框，但我尝试了多次删除和更改，发现只有此代码导致速度变慢。因此，虽然我可以假设浏览器在某个时间处理的数学运算可能太多，但我真的不明白为什么这么简单会出现问题，也无法想到解决方案。
/* Post Saying text count */
var postSayingLimit = 450;
$('span.counter').text(postSayingLimit);
$('#post-saying').bind('keyup keypress', function() {
var postSayingUsed = $(this).val().length;
if(postSayingUsed >= postSayingLimit - postSayingLimit / 10) {
$(this).parent().find('span.counter').addClass('counter-limit');
} else {
$(this).parent().find('span.counter').removeClass('counter-limit');
}
var postSayingCount = postSayingLimit - postSayingUsed;
$(this).parent().find('span.counter').text(postSayingCount);
});
我尝试删除条件，转到一个绑定，甚至插入硬值只是为了继续它的滞后。也许将一些变量移出绑定函数？将实际的计数器过程也变成一个函数？
I've created a character counter for use in the JQuery library to have a similar effect as the Twitter counter (remaining characters left counter). However, I've noticed that at least FireFox has a rough time handling it (other browsers show some strain, but not as bad). Basically, while typing at a steady pace, it'll begin to play 'catch up' and even make the browser unresponsive until it does catch up. When trying the same typing speed in Twitter's textbox, it has no slow down at all!
While I do have an autoresize plugin that watches this box, I've tried many removal and changes to find that only this code is causing the slow down. So, while I can assume it might be too much math for the browser to handle at a certain time, I don't really see why there's a problem with how simple this is, nor can think of a solution.
/* Post Saying text count */
var postSayingLimit = 450;
$('span.counter').text(postSayingLimit);
$('#post-saying').bind('keyup keypress', function() {
var postSayingUsed = $(this).val().length;
if(postSayingUsed >= postSayingLimit - postSayingLimit / 10) {
$(this).parent().find('span.counter').addClass('counter-limit');
} else {
$(this).parent().find('span.counter').removeClass('counter-limit');
}
var postSayingCount = postSayingLimit - postSayingUsed;
$(this).parent().find('span.counter').text(postSayingCount);
});
I've tried removing the conditional, going to one binding, and even inserting hard values with it only to continue it's lag. Maybe moving some of the variables out of the bind function? Making the actual counter process into a function as well?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我在这里举了一个例子： http://jsfiddle.net/zpjc6/
对我来说速度很快（尽管是 chrome） 。我还通过将跨度保存在变量中做了一个小小的改进。虽然这样做是一个很好的做法，但它不应该那么昂贵。
但也许它有帮助。
编辑：也许你可以链接到你的实际网站？
I made an example here: http://jsfiddle.net/zpjc6/
works fast for me (chrome though). i also made a minor improvement by saving the span in an variable. While it's good practice to do so it shouldn't be that expensive though.
But maybe it helps.
edit: maybe you could link to your actual site?
您将希望尽可能多地移动查找的元素，并且仅在必要时才运行类删除。 （在找出一种有效的方法来确定是否有必要之前，值得尝试消除重复搜索。）
You'll want to move as much of the element finding out as possible, and you'll want to only run the class removing if necessary. (Before figuring out an efficient way of determining if it's necessary or not though, it's worth trying to just do away with the repeated searching.)