javascript - 使用 setTimeout 推迟数据输入时的时间密集型处理

Question

我有一个文本区域，用户可以在其中键入一些数据。我需要在更改时读取这些数据并对其进行处理，处理过程非常耗时。

我有 textarea 事件:更改 keyup 剪切粘贴输入调用函数 triggerProcess()。

如果在文本区域中只输入了一个字符(或只删除了一个字符)，则需要调用 triggerProcess()。

如果输入一个包含多个字符的单词，那么如果为该单词中的每个字符调用 triggerProcess()，整个系统就会停止运行。即使系统没有停止运行，为每个字符调用 triggerProcess() 也是毫无意义的，因为需要处理的是整个单词加上整个内容。但是，可能需要处理单个字符(例如“I”)或数字。

如果打字员正在打字或句子(如果打字员很快)，我想推迟处理，但一旦他们暂停，他们的数据就会被处理。

一旦 triggerProcess 被调用，它所做的第一件事就是清除一个计时器，然后设置另一个计时器，在它到期时调用密集处理。我的想法是在 triggerProcess 中设置一个大约 300 毫秒的短超时，以便在从文本区域读取数据并进行处理之前始终至少有 300 毫秒。如果输入一个字符说“I”然后将被处理，但如果按顺序输入多个字符，例如当输入一个单词时，textarea 事件观察器将调用 triggerProcess，计时器将被清除并再次启动特点。当单词完成并且从键盘到文本区域的流中存在间隙时，最后启动的计时器到期并处理单词。我知道这会在处理文本区域内容时卡住打字员，但卡住比卡住每个字符的打字员要好得多。

我的代码看起来如何？会不会出了什么大问题？可以改进吗？

感谢您花时间阅读本文，感谢收到所有评论。

彼得

var delayTimer;  //global variable as opposed to local variable so that it can be cleared within function display.
function triggerProcess(){
   clearTimeout(delayTimer);
   delayTimer = 0;
   delayTimer=setTimeout(function(){
      // when the Timeout fires then
     // read the data from the textarea and have some very time consuming work on it 
   },300);
}

Answer 1

您要实现的目标称为自动完成。

我觉得你的代码很酷，但如果我是你，我不会选择 setTimeOut，因为那是一种 hack，会使体验变慢。我会想到 AJAX 调用而不是 setTimeOut 使用 AJAX(因为调用是异步的)，您可以多次发送请求希望用户不会遇到任何不好的事情。每当调用用户类型和更改事件时，它都会请求新的匹配词，并在有新匹配词时向用户显示。

我不知道您是否使用 jQuery，但无论如何 jQuery UI 都有一个组件(参见此处 jQuery UI AUtocomplete)。感谢上帝 jQuery UI 是一个开源项目，您可以在/ui/jquery.ui.autocomplete.js 中查看代码。如果你打开另一个 autocompleteEvents.js，你可以看到那里有四种事件类型:focus、close、select、change。正如您在 autocomplete example 中看到的那样.

           $.ajax({
                    //Where you load the data, could be a backend server instead of a
                    // XML  file
                    url: "london.xml",
                    dataType: "xml",
                    success: function( xmlResponse ) {
                             //If matching any element from the london.xml file,
                             // Show the result in a menu or something
                    }
            });

它只是在任何东西发生变化时调用以获得新结果(就这么简单)。如果您不喜欢 AJAX，请尝试使用回调，在您发送新输入的单词后显示结果并获得回复，而不是在两者之间。

这只是另一个自动完成示例，考虑了我的第二个建议:complete.ly .它共享相同的概念。它只是添加了 onchange 和 keyup 事件:

     if (txt.addEventListener) {
        txt.addEventListener("input",  handler, false);
        txt.addEventListener('keyup',  handler, false);
        txt.addEventListener('change', handler, false);
    }

并且会在完成获取新值时进行回调，检查是否有匹配项并显示结果:

    var handler = function() {
        var value = txt.value;
        if (registerOnTextChangeOldValue !== value) {
            callback(value);
        }
    };

在这里阅读完整的源代码:complete.ly source code我希望我说得有道理并且我的回答有所帮助!