Question

我目前正在网页上做一个突出显示功能，我正在使用jquery插件。我的代码如下所示：

var input = function() {         
    var matchword = $('#searchbox').val();
    if(matchword != "") {
        $('body').removeHighlight();
        $('body').highlight($('#searchbox').val());
    }
}

$(document).ready(function() {
    $('#searchbox').keyup(function() {
        setTimeout("input()", 2000);    
    });
});

如果页面上没有如此大量的数据，它可以正常工作。但是如果页面上有大量数据，整个过程会变慢，导致输入框冻结，直到字母突出显示。因此打字不顺畅。我尝试使用setTimeout但它似乎没有帮助。有什么想法吗？

Answer 1

请不要传递setTimeout一个字符串，在这种情况下没有必要，你可以直接调用这个函数：

$(function() {
    $('#searchbox').keyup(function() {
       if($(this).data("timeout")) clearTimeout($(this).data("timeout"));
        $(this).data("timeout", setTimeout(input, 2000));
    });
});

至于排队高亮的另一个问题，你只需要像上面那样清除之前的超时（从最多2秒前）。此外，您可以使用.data()在本地存储此超时，如上所述，更少的全局变量，您可以在多个元素中使用它而不是每个元素的超时变量。

Answer 2

在您提供的示例中，setTimeout仅延迟执行该函数，但执行次数仍然相同。你需要做的是，每次用户键入一个字符时刷新超时，所以每次都不会触发input（）函数：

var timer;

$('#searchbox').keyup(function() {
  clearTimeout(timer);
  timer = setTimeout(input, 2000);
});

Answer 3

你可以使用JQuery throttle插件 - 这是一个速率限制器。

实际上并不需要jQuery 这个插件，因为没什么内部的使用任何jQuery方法或属性。 jQuery仅用作命名空间这些方法可以存在。

来自here

jQuery油门/去抖可以让你限制你的功能多种有用的方式。传递延迟并回调$ .throttle返回一个不再执行的新功能比每延迟毫秒一次。传递延迟和回调 $ .debounce返回一个新函数将只执行一次，合并多个顺序调用到单独执行任何一个开始或结束。

Answer 4

现在超时没有帮助，因为你只是将所有键盘事件的执行延迟了2000毫秒 - 它只会在2秒后冻结浏览器。我假设你想要的是当 last keyup事件有2000毫秒时，然后触发input函数。这可以这样完成：

$(document).ready(function() {
    var keyUpTimeout;
    $('#searchbox').keyup(function() {
        clearTimeout(keyUpTimeout);
        keyUpTimeout = setTimeout("input()", 2000);    
    });
});

当您使用clearTimeout清除先前的超时时，input函数仅在写入停止时被调用一次。因此，当用户暂停写入2秒钟时，文本会突出显示。

Answer 5

考虑使用具有setInterval函数的焦点和模糊侦听器，而不是使用keyup侦听器。在下面的例子中，我只在“searchbox”值发生变化时才调用输入法。这样我就可以避免对输入法进行不必要的调用[比如用户按下shift键]。

$(document).ready(function() {
    var highlightInterval;
    var previousValue = $('#searchbox').val();
    $('#searchbox').focus(function() {
       if(highlightInterval) {
          window.clearInterval(highlightInterval);
       }
       highlightInterval = window.setInterval(function(){ 
          if(previousValue != $('#searchbox').val()){
             previousValue = $('#searchbox').val();
             input();       
          }
       }, 2000);
   });
   $('#searchbox').blur(function(){
       window.clearInterval(highlightInterval);
   });
});

Answer 6

据我所知，突出显示的方法是寻找$('#searchbox').val()的所有外观，然后以某种突出显示方式对其进行处理。如果我错了，请纠正我！

我认为你可以通过在setTimeout中包装每个突出显示来使它更顺畅，就像这样

function wrapIntoHighligh(something){
  ...
}

for(var i = 0; i < occurrences.length; i++){
   setTimeout("wrapIntoHighligh(something)", 1);
}

它可能不是更清晰的解决方案......但它会使每个突出显示都退出循环，它将再次在JS堆栈中启用，并希望它不会阻止所有内容。

Javascript：setTimeout（） - 需要帮助

6 个答案: