title: 防重复点击-节流函数 date: 2018-07-09 14:20:58 tags:
- 前端 categories:
- 前端
继续上一内容,更新第二部分,防重复点击-节流函数的使用。
- 截图分享功能
==2. 按钮防重复点击(节流函数应用)== 3. 下拉刷新,上拉加载更多(这个地方有坑) 4. 性能优化方面
事因:测试小伙伴疯狂的点击了分享功能。。。虽然已经做了判断,多次点击只会执行一次分享功能,但是这样会导致路由变多,后果就是返回时会多次出现一个页面。没办法只能上节流函数了。
先做下节流函数的介绍
概念:函数节流是通过一个定时器,阻断连续重复的函数调用,从而一定程度上优化性能。
用途:主要用于用户界面调用的函数,如:resize、mousemove、keyup事件的监听函数。
这类监听函数的主要特征:
1、短时间内连续多次重复触发;
2、大量的DOM操作。
意义:在用户察觉范围外,降低函数调用的频率,从而提升性能
节流函数原理:
某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。
具体用法:
例如:
1、使用onresize
事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作,其高频率的更改可能会让浏览器崩溃。
2、我们常见的一个搜索的功能,我们一般是绑定keyup事件,每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容搜索一次而已。
为了解决这些问题,就可以使用定时器对函数进行节流。
函数代码如下:
throttle(method, context, params) {
clearTimeout(method.tId);
method.tId = setTimeout(function () {
method.call(context, params);
}, 200);
},
复制代码
在需要使用的地方调用相应的方法,传入参数:
<a class="news-share" href="javascript:;" @click="clickShare(news)">分享</a>
clickShare(news) {
this.throttle(this.handleShare, this, news);
},
async handleShare(news) {
console.warn('调用了');
}
复制代码
以上为在vue中的用法。这是一个较为基础的节流函数,网上也提供了许多高级一些的节流函数,这个就需要根据各自的项目业务需求进行使用了。
以下内容为引用:
节流函数增强版:
使用场景:当达到某个时间值时,一定要执行一次这个搜索函数。
<input id="search" type="text" name="search">
function queryData(text){
console.log("搜索:" + text);
}
var input = document.getElementById("search");
input.addEventListener("keyup", function(event){
throttle(queryData, null, 500, this.value,1000);
// throttle(queryData, null, 500, this.value);
// queryData(this.value);
});
function throttle(fn,context,delay,text,mustApplyTime){
clearTimeout(fn.timer);
fn._cur=Date.now(); //记录当前时间
if(!fn._start){ //若该函数是第一次调用,则直接设置_start,即开始时间,为_cur,即此刻的时间
fn._start=fn._cur;
}
if(fn._cur-fn._start>mustApplyTime){
//当前时间与上一次函数被执行的时间作差,与mustApplyTime比较,若大于,则必须执行一次函数,若小于,则重新设置计时器
fn.call(context,text);
fn._start=fn._cur;
}else{
fn.timer=setTimeout(function(){
fn.call(context,text);
},delay);
}
}
复制代码
显然,连续的输入,到一定时间间隔之后,queryData函数必然会被调用,但是又不是频繁的调用。这既达到了节流的目的,又不会影响用户体验。
进一步的话,就是可以在调用throttle函数之前,先对输入的内容进行判断,若其值为空、值不变都不用再调用。