理论知识:
防抖debounce:多次触发,只执行最后一次。input输入框
节流throttle:规定时间内,只执行一次。鼠标滚轮滚动
参考链接:防抖和节流——博客
代码:
/**
* js防抖
* @param fn
* @param wait
* @returns {Function}
*/
debounce: function (fn, wait) {
var timeout = null;
return function () {
// 保存函数调用时的上下文和参数,传递给 fn
var context = this;
var args = arguments;
if (timeout !== null) clearTimeout(timeout);
timeout = setTimeout(function () {
fn.apply(context, args);
}, wait);
}
},
throttle: function (action, delay) {
var statTime = 0;
return function () {
var currTime = +new Date();
if (currTime - statTime > delay) {
action.apply(this, arguments);
statTime = currTime;
}
}
},
写到这儿,以上就是简略的防抖和节流。
以下是详细的防抖和节流,可选看:
防抖和节流:
节流与防抖的作用都是防止函数多次调用。区别在于,假如用户一直触发这个函数,且每次触发函数的间隔小于阙值,防抖的情况下只会调用一次,而节流会每隔一定时间调用函数。
防抖:
防抖核心思路:就是建立一个定时器,先清除定时器,随后再开一个定时器,指定时间后执行函数。这就实现了一个简易的防抖,指定时间内重复触发函数只会执行一次。已经很好的解决了高频重复触发的问题。
使用案列:
//获取短信验证码
let getYzm = GlobalUtils.debounce(Login.getYzm, 300)
备注:因为调取使用debounce函数,this与event均丢失了。
1.先解决this指向问题,正常在function函数中,this指向的应该是调用函数的对象,也就是getYzm ,因为在debounce中返回了一个匿名函数,形成了一个闭包,导致this丢失。指定this指向的方法有apply与call,用法差别只在参数,call需要的是一个数组,这里就用apply。
2.解决event参数,正常在function函数中有一个event,指向当前的事件对象。因为debounce函数返回的是一个匿名函数,可以通过arguments属性来获取参数,该属性是一个由函数参数组成的类数组。
节流:
直接比较当前时间currTime与上一个时间startTime,如果这个剩余时间大于延迟时间delay,表明立即执行函数;小于delay表明将要停止节流函数,立即清除定时器,立即执行函数。