【JS】函数防抖和节流
函数防抖
在一定时间间隔内只触发最后一次函数
应用情况
1.点击按钮触发
2.搜索框输入时触发的请求
代码实现
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26export default function(func, wait, immediate) {//防抖函数 let timeout return function(...args) { clearTimeout(timeout) timeout = setTimeout(() => { timeout = null if (!immediate) func.apply(this, args) }, wait) if (immediate && !timeout) func.apply(this, [...args]) } } /* vue中的使用方法 import Debounce from '@/untils/debounce.js' default (){ … methods:{ getData:Debounce(function(params){// params是当前方法的参数,会传入防抖函数 //这里放执行代码 },1000) }, … } PS://请不要用箭头函数等其他写法,会导致this的指向错误,格式请严格按照上面的写法使用 */
函数节流
在一定时间中只触发一次函数
应用情况
1.滚动框事件
2.函数触发的时间边界处理
代码实现
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18export default function(func, delay) { let timer = null; let startTime = Date.now(); return function() { let curTime = Date.now(); let remaining = delay - (curTime - startTime); let context = this; let args = arguments; clearTimeout(timer); if (remaining <= 0) { func.apply(context, args); startTime = Date.now(); } else { timer = setTimeout(func, remaining); } } }
最后
以上就是积极蜗牛最近收集整理的关于【JS】函数防抖和节流【JS】函数防抖和节流的全部内容,更多相关【JS】函数防抖和节流【JS】函数防抖和节流内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复