Question

如何将一堆代码附加到onkeydown事件，但是将文本输入textarea快速而清晰？任何超过几个IF语句的东西似乎都会大大降低它的速度。

编辑：我应该添加（不能相信我忘了！）这不会影响桌面浏览器。这主要是iPhone Safari的一个问题。其他移动浏览器也可能受到影响，但我们专注于iPhone Safari，因为它最好地执行JS（AFAIK）

Answer 1

考虑到你关于这个专注于iPhone访问的编辑...

iPhone真的没有那么大的力量。您最好只使用 onchange 或 onblur 而不是 onkeydown 。

Dave回答的另一种方法是等待用户暂停（例如5秒）：

var textarea = document.getElementById('textarea');

function checkTextArea() {
   if (textarea.value /* ... */) {
     /* ... */
   }
}

textarea.keyDownTimeout = null;
textarea.onkeydown = function () {
  if (textarea.keyDownTimeout) clearTimeout(textarea.keyDownTimeout);
  textarea.keyDownTimeout = setTimeout(checkTextArea, 5000);
};

这应该使用第一个keydown设置计时器，停止并为每个连续的keydown重新创建计时器。最后在用户停止输入后调用5秒钟。

另外，请注意checkTextArea后缺少括号。这将为setTimeout提供函数的引用与其return。

您还可以在函数中进行设置，以便更轻松地使用多个元素：

function setPauseTimer(element, timeout, callback) {
  var timer = null;
  element.onkeydown = function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(function(){ callback(element); }, timeout);
  };
}

function checkTextArea(textarea) { /* moved from global to argument */
   if (textarea.value /* ... */) {
     /* ... */
   }
}

setPauseTimer(document.getElementById('textarea'), 5000, checkTextArea);

Answer 2

也许你可以发布“一堆代码”，我们可以讨论那里是否有一些重构（在用计时器复制之前）。看起来您可能会首先跳到二级优化。

Answer 3

嗯，一种方法是不使用onkeydown，而是使用计时器。您可以设置运行函数的间隔，检查TextArea的内容并在那里运行您的逻辑。似乎它将通过大部分开销。无论如何，试一试，我认为这可能有所帮助。

以下是您将如何使用它：

// First param is the function to call, second is 
// time interval in miliseconds
var timer = setTimeout(checkTextArea(), 5000);

function checkTextArea() {
    var text = document.getElementById("textarea").value;
    // logic...
    timer = setTimeout(checkTextArea(), 5000); // we loop it back to 
                                               //the function with the timer
}

Answer 4

我曾想过计时器方法。我相信setTnterval会比setTimeout更好，但这似乎不是最佳解决方案，不是吗？

使用Javascript注册`keydown`事件后，Textarea滞后

4 个答案: