input输入搜索防抖函数

输入框搜索频繁请求接口,防抖函数可有效控制接口请求完成后,间隔设置的时长再次请求,避免一次请求未结束又进行了下一次请求。

1.安装lodash: npm install lodash --save

2.组件中使用:

import _ from 'lodash'

<input v-model="mobile"  onkeyup="value=value.replace(/[^\d]/g,'')"  @input="searchInfo" />

searchInfo: _.debounce(function() {

       this.search();

 }, 200),

search(){

    if(this.mobile){

        console.log('接口查询')

    }

}

注:debounce若使用箭头函数,对this指向无效

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容

  • 关于节流和防抖,这篇文章说的很好了,深入lodash源码分析防抖和节流深入篇 | Lodash 防抖和节流是怎么实...
    erya_he阅读 181评论 0 0
  • 函数节流 还记得上篇文章中说到的图片懒加载吗?我们在文章的最后实现了一个页面滚动时按需加载图片的方式,即在触发滚动...
    柏丘君阅读 2,863评论 1 19
  • 长久以来,面向对象在 JavaScript 编程范式中占据着主导地位。不过,最近人们对函数式编程的兴趣正在增长。函...
    神刀阅读 483评论 0 0
  • 前言 最近和前端的小伙伴们,在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是,想深入研究一下两者...
    youthcity阅读 23,608评论 5 78
  • 本篇课题,或许早已是烂大街的解读文章。不过春招系列面试下来,不少伙伴们还是似懂非懂地栽倒在(~面试官~)深意的笑容...
    以乐之名阅读 1,796评论 0 9