vue防抖节流
2020-07-24 12:17
24 查看
vue防抖节流原理及使用场景
防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算。
一、函数防抖
1:定义
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时;典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时。
2:实现原理
函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行。
3:使用场景
文本框输入搜索(连续输入时避免多次请求接口)
4:代码实现
/** * 函数防抖 */ export function debounce(fn, delay) { // 记录上一次的延时器 var timer = null; var delay = delay || 200; return function() { var args = arguments; var that = this; // 清除上一次延时器 clearTimeout(timer) timer = setTimeout(function() { fn.apply(that,args) }, delay); } }
二、函数节流
1:定义
规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效; 典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只有一次生效。
2:实现原理
其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,
3:使用场景
resize、scroll、mousemove等事件触发监听 代码实现 /** * 函数节流 */ export function throttle(fn,delay){ var lastTime; var timer; var delay = delay || 200; return function() { var args = arguments; // 记录当前函数触发的时间 var nowTime = Date.now(); if (lastTime && nowTime - lastTime < delay) { clearTimeout(timer); timer = setTimeout(function () { // 记录上一次函数触发的时间 lastTime = nowTime; // 修正this指向问题 fn.apply(this, args); }, delay); }else{ lastTime = nowTime; fn.apply(this, args); } } }
相关文章推荐
- vue tab切换效果
- Vue router的安装及运用
- vue中使用vuex
- Vue router内调用组件(嵌套router)
- vue传值示例
- Vue routerd的安装与使用(每天前进一小步,一年前进一大步)
- Vue router安装使用简介
- Vue router
- Vue router的安装与跳转的使用
- Vue router路由安装配置及页面间跳转
- Vue Router路由管理器基本使用
- Vue router---路由器
- 初入前端开发从0到1——Vue+Vant开发外卖点单项目学习记录(1)
- Vue router的安装及使用
- vue router的安装以及使用
- Vue router
- vue路由router的实现
- vue创建自定义组件与组件传值
- vue router安装和使用
- (饿了么商家点餐页面Vue实战项目)总结