输入框中根据用户输入内容动态查询

标签：时间   状态   function   null   set   content   lis   put   实现原理   

前端 UI 设计里面有一个经常需要用到的实时搜索场景：

当用户在 inpu 里面键入新的内容后，不依赖于用户触发(如点击按钮)，立即自动向后端发起 ajax 查询并展示结果。

这一需求有多种实现方案，典型的是可以设置一个定时器轮询 input 中的内容是否发生变化，若变化了则立即发起后端查询。这种方案思路比较清晰，但有一个弊端：需要定时器时时运行，且设置的轮询时间间隔要求较高：若此值太小则会对用户的每个“中间输入”发起搜索，这是很大的 CPU 浪费和网络浪费。

如用户想搜索：“hello word”，轮询的时间间隔过小则会造成分别对 "h" , "he", "hel", "hell", "hello"....... 等等都发起搜索，这是不必要的浪费。

而轮询时间设置过大则会让用户体验到“迟钝”的感觉：虽然不会对中间状态的输入发起搜索，但是当用户输入完毕后不会立即发起搜索，不会让用户体验到实时的快感！

这个需求有另一种简单的解决方法而且更接近用户的输入习惯：若超过一段时间没有输入，则说明用户想要发起搜索。因大多数人的输入速度落在某一个固定的区间，我们比较容易选一个合适的间隔时间就能够符合大多数人的使用习惯。就像使用“百度搜索”一样，用户停止输入大概半秒钟则会自动发起搜索。

具体的实现原理是：对当前 input 框内的键入事件作监测，若超过一个阈值没有键盘事件，则直接发起查询，动态显示结果。代码如下：

//等待用户不输入 1 秒后再去执行 loadData
var loseInputMillsecs = 1000;
var clocker = null;

function loadData()
{
console.info("do load data list");
clocker = null;
}

function innerKeydown()
{
if(null == clocker)
{
clocker = setTimeout(loadData,loseInputMillsecs);
}
else //连续击键，重新开始计时
{
clearTimeout(clocker);
clocker = setTimeout(loadData,loseInputMillsecs);
}
}

$(‘#statementContent‘).find(‘#moudel_selectex>input‘).keydown(function(){
innerKeydown();
})

输入框中根据用户输入内容动态查询

标签：时间   状态   function   null   set   content   lis   put   实现原理   

原文地址：https://www.cnblogs.com/kaicy/p/14673164.html