根据输入实时发送请求(防抖函数) - 蓝蓝设计_UI设计公司

根据输入实时发送请求(防抖函数)

2019-5-25 释然 前端及开发文章及欣赏

如果您想订阅本博客内容,每天自动发到您的邮箱中,

有这样一种常见的需求:有一个搜索框,需要根据用户的输入进行实时的查询。也就是说用户每输入一个字符就要发送一次请求。

最先想到的做法是监听输入框的keyup时间然后在回调里发送异步请求。

这样做的不足也很明显:

其实我们并不需要用户每次输入时都发送请求,这样会给服务器造成不必要的压力。

因为发送的是异步请求,有可能查询的结果和最后输入的内容并不匹配。

如何解决以上两种问题呢? 有两种解决方案

首先我们规定当用户停止输入1秒(具体时间根据自己需求而定)后再根据输入框的值发送请求。
其次我们利用定时器来解决以上问题。
第一种方案:直接看代码吧

vat timer
$('.input').on('keyup', function(e) {
    clearTimeout(timer)
    timer = setTimeout(function() {
      // do something
    }, 1000)
})

首先定义一个定时器timer
监听输入框的keyup事件,在回调函数里先清除timer,这一步总能保证在用户停止输入1秒后执行最后一个timer。如果用户输入的间隔小于1秒就不会执行timer
这么写似乎不太抽象,而且定义了一个全局变量timer,不友好!稍加改动一下:

function debounce(func,delay){
    var timer
    return function(){
        clearTimeout(timer)
        var event = arguments[0]  // 获取原生event参数
        timer = setTimeout(function(){
            func(event)
        },delay)
    }
}
function handle(event){
    // do something 
}
$('.input').on('keyup', debounce(handle, 1000))

这样是不是复用性更高,我们只需要在handle函数中写我们的处理逻辑就可以了。而且没有了全局变量,避免了全局污染的可能!!

*第二种方案: *

var lastTime
$('.input').on('keyup', function(e) {
    lastTime = e.timeStamp
    setTimeout(function() {
        console.log('timeout')
        if (lastTime == e.timeStamp) {
            // do something
        }
    }, 1000)
})

首先定义一个时间戳来保存最后一次输入的时间
然后1秒后在定时器里判断保存的时间戳和触发事件的时间戳e.timeStamp是否相同,只要1秒内又输入了内容,e.timeStamp就回变化。
但是这种写法有个弊端,用户键入几次就会执行几次setTimeout,也就是说当用户连续键入多个字符后,会有多个任务被推入待执行队列,然后每隔1秒执行,只是在执行的时候判断要不要发送异步请求,这种方式不会发送多余的异步请求,但是会执行多余的任务,这无疑浪费了性能。

蓝蓝设计www.thriveonsite.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: 根据输入实时发送请求(防抖函数)


Powered by sitemap
秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网