写一个限制执行次数的函数
2017-12-07 18:09
162 查看
前言:当监听窗口的下拉事件或者输入框的输入事件时,会频繁的触发所监听的函数,我们并不想如此频繁的执行那些我们定义的函数,这样会造成一些不好的用户体验,接下来我们就开始解决这个问题
原理分析1:假如我们定义的监听函数名字是fun,那么问题的实质就是fun这个函数会被在短时间内调用多次,那么这样的话我们可以想到的是在每次将要调用fun函数时记录下当下的时间戳,不要立刻执行这个函数,而是设置一个定时器,在500毫秒之后再执行,同时再判断如果两次触发的时间间隔小于500毫秒那么就意味着上一次触发时的fun函数还没有被调用触发时刻又到了,所以clear掉上次的定时器,当然本次触发也是在500毫秒之后再执行fun函数。
原理1代码:
一些初始值:
代码如下:
代码执行结果:在这种情况下,我们会发现当频繁的触发(两次之间的间隔在500毫秒)fun函数时,只有最后一次触发会执行fun函数
但是,我们又有了一个新的需求:我们并不想在频繁的触发这段时间内只有最后一次触发会成功,我们想在频繁的触发这段时间每500毫秒执行一次(第一次和最后一次都要被执行到)。
这时我们的代码就成为了:
这样写更好
原理分析1:假如我们定义的监听函数名字是fun,那么问题的实质就是fun这个函数会被在短时间内调用多次,那么这样的话我们可以想到的是在每次将要调用fun函数时记录下当下的时间戳,不要立刻执行这个函数,而是设置一个定时器,在500毫秒之后再执行,同时再判断如果两次触发的时间间隔小于500毫秒那么就意味着上一次触发时的fun函数还没有被调用触发时刻又到了,所以clear掉上次的定时器,当然本次触发也是在500毫秒之后再执行fun函数。
原理1代码:
一些初始值:
data: { question: '', i: 0, last: 0, timeP: 0 },
代码如下:
question: function(val) { var now = Date.now(); var self = this; if (now - this.last < 500) { clearTimeout(this.timeP); } this.timeP = setTimeout(function (){ self.ajax(); }, 500); this.last = now; }
代码执行结果:在这种情况下,我们会发现当频繁的触发(两次之间的间隔在500毫秒)fun函数时,只有最后一次触发会执行fun函数
但是,我们又有了一个新的需求:我们并不想在频繁的触发这段时间内只有最后一次触发会成功,我们想在频繁的触发这段时间每500毫秒执行一次(第一次和最后一次都要被执行到)。
这时我们的代码就成为了:
question: function(val) { var now = Date.now(); var self = this; if (now - this.last < 500) { clearTimeout(this.timeP); this.timeP = setTimeout(function (){ this.last = now; self.ajax(); }, 500); } else { this.last = now; self.ajax(); } }
这样写更好
question: function(val) { var self = this; var now = Date.now(); clearTimeout(self.timeP); if (now - self.last > 1000) { self.ajax(); self.last = now; } else { self.timeP = setTimeout(function () { self.ajax(); self.last = now; }, 500); } }
相关文章推荐
- system函数在当前进程下执行一个新命令
- Unity3d之MonoBehavior的各个函数的执行顺序,回调,顺序,次数等
- js 执行完一个函数之后再执行另外一个函数
- 2.6 编写一个函数setbits(x, p ,n, y),该函数返回对x执行下列操作后的结果值: 将x中从第p位开始的n个(二进制)位设置为y中最右边n位的值,x的其余各位保持不变。
- REGEXP在mysql是用来执行正则表达式的一个函数
- js查看一个函数的执行时间实例代码
- :(~~ 痛苦啊~~构造了一个“没有执行能力”的函数
- 获得函数执行的次数
- 有一个string,写一个函数,要求输出这个string中每个单词出现的次数的列表
- window.addEventListener来解决让一个js事件执行多个函数
- 页面加载完成后自动执行一个方法函数的JQ、JS方法
- php计算一个页面执行时间函数写法
- 判断ShellExecute函数是否执行完一个程序的方法
- 练习 2-6 编写一个函数 setbits(x, p, n, y),该函数返回对x执行下列操作后的结果值:将x中从第p位开始的n个(二进制)位设置为y中最右边n位的值,x的其余各位保持不变。
- 练习 2-7 编写一个函数invert(x, p, n),该函数返回对x执行下列操作后的结果值:将x中从第p位开始的n个(二进制)位求反(即,1变成0,0变成1),x的其余各位保持不变。
- c# 多线程执行一个函数
- SQL中获取一个长字符串中某个字符串出现次数的简单方法(函数)
- python的一个函数里面有while,在while里面执行了return,是跳出整个循环,还是跳出整个函数
- Unity3d之MonoBehavior的各个函数的执行顺序,回调,顺序,次数等
- Cocos2d-x 3.0 JNI BUG 修复。(Android 如何创建一个线程 延迟执行函数 创建一个随机数)