javascript - 在 Javascript 中轮询输入字段

Question

我正在自学 JQuery，作为练习，我正在创建一个页面，用户在其中的输入字段中输入文本，该字符串的所有实例都会在页面正文中找到并突出显示。我已经能够在用户单击按钮时实现此功能，但我想让它做的是不断轮询输入字段并突出显示字符串。

进行连续轮询似乎会使页面崩溃。

$(document).ready(function(){

     while(1==1){

         var str = document.input.str.value;

          $(function(){
               $('p:contains('+str+')').each(function(){
                     var regex = new RegExp(str, "g");

                      $(this).html( $(this).html().replace( regex ,"<span class='hlt'>"+str+"</span>")); 
                });
            });
    }
});

网站似乎一直都有这种功能，所以我确信它是可行的，但我似乎找不到任何关于它的信息。

非常感谢!

Answer 1

这会使您的页面无响应的原因是 JavaScript 通常与 UI 在同一线程上运行。也就是说，如果你的 JavaScript 正在运行，页面的其余部分将没有响应。你真正想做的是以下之一:

• 使用 blur 事件(当输入框失去焦点时触发)
• 使用change事件
• 使用 keyup/keydown 事件
• 使用 setTimeout 或 setInterval 以非阻塞方式轮询输入框

如果你想观察输入框可能发生的每一个变化，我建议观察键盘事件。

$(document).ready(function(){
    $('#inputID').keyup(function(){
        $('p:contains('+str+')').each(function(){
                 var regex = new RegExp(str, "g");
                 $(this).html( $(this).html().replace( regex ,"<span class='hlt'>"+str+"</span>")); 
        });
    });
});

如果您想要轮询方法:

$(document).ready(function(){
    var intervalID = setInterval(function(){
        //execute logic here
    }, 100); // 100 ms check
});