文档章节

js节流防抖应用场景,以及在vue中节流防抖的具体实现

o
 osc_y8yehimr
发布于 2019/03/21 08:55
字数 588
阅读 12
收藏 0

故事背景:

项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(debounce),在网上想找个现成的用下,但是好多都不对,于是就自己搞了。

先看看概念

函数防抖(debounce):

在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时;典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时。

函数节流(throttle):

规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效; 典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只有一次生效。

setTimeout内 this失效:

这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上,这会使得this指向的是window对象,看下图 :

打了断点,在Console下输出 this 是Window对象,解决这个问题可以在setTimeout函数外面定义一个 that = this 就可以了,输出 that果然就是该组件的对象

看在vue中的实际代码:

1.输入框,输入最后一个字 2秒后执行(防抖:debounce):

html:
<input type="text" class="input" v-model="searchText" @keyup="debounce"/> js: debounce: function(){ let that = this if(timer){ clearTimeout(timer) } timer = setTimeout(function () { console.log('输入') timer = undefined; },2000) }

timer 不要放在 debounce函数内部,要在文件全局定义,如下所示:

 效果演示如下(输入一次文字2秒后执行,多次输入,还是执行一次,成功):

 

2.在2秒内多次点击,只有一次生效(节流:throttle):

html:
 
<div @click="throttle">点我。。</div>

js: 
        throttle: function(){
            let that = this
            let now = +new Date();
            if(lastTime && lastTime - now < 2000){
                clearTimeout(timer)
            }
            timer = setTimeout(function () {
                console.log('点击')
                lastTime = +new Date()
            },200)
        }

 lastTime 跟 timer一样,都要定义在文件的全局,如下:

效果图如下:第一次点击一下输出一次,第二次双击选中,又输出一次,成功。

 

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Vue-插槽slot/具名插槽

插槽的基本使用: <div id="app"> <cpn> <span>我是替换slot的元素1</span> </cpn>------------------------------------- <cpn2> <span>......

心田已荒
16分钟前
6
0
标准Android按钮具有不同的颜色 - Standard Android Button with a different color

问题: I'd like to change the color of a standard Android button slightly in order to better match a client's branding. 我想稍微更改标准Android按钮的颜色,以便更好地匹配客户的品......

技术盛宴
34分钟前
24
0
如何在Ruby中生成随机字符串 - How to generate a random string in Ruby

问题: I'm currently generating an 8-character pseudo-random uppercase string for "A" .. "Z": 我目前正在为“ A” ..“ Z”生成一个8个字符的伪随机大写字符串: value = ""; 8.times{......

法国红酒甜
今天
20
0
原价500元的认证证书,限时免费考取!

本文作者:y****n 百度云智学院致力于为百度ABC战略(人工智能、大数据、云计算)提供人才生态体系建设,包括基于百度ABC、IoT的课程体系,整合百度优势技术能力的深度学习技术、Apollo无人车...

百度开发者中心
昨天
17
0
在virtualenv中使用Python 3 - Using Python 3 in virtualenv

问题: Using virtualenv , I run my projects with the default version of Python (2.7). 使用virtualenv ,我使用默认版本的Python(2.7)运行项目。 On one project, I need to use Pyth......

富含淀粉
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部