抖功能函数
function debounce(fn) {
// 4、创建一个标记用来存放定时器的返回值
let timeout = null;
return function() {
// 5、每次当用户点击/输入的时候,把前一个定时器清除
clearTimeout(timeout);
// 6、然后创建一个新的 setTimeout,
// 这样就能保证点击按钮后的 interval 间隔内
// 如果用户还点击了的话,就不会执行 fn 函数
timeout = setTimeout(() => {
fn.call(this, arguments);
}, 1000);
};
}
fn.call优化参数和this
假如我们需要获取input框中输入的值,如何获取?我们知道在oninput事件触发时会有参数传递,并且触发的函数中this是指向当前的元素节点的
目前我们fn的执行是一个独立函数调用,它里面的this是window,我们需要将其修改为对应的节点对象,而返回的function中的this指向的是节点对象;
目前我们的fn在执行时是没有传递任何的参数的,它需要将触发事件时传递的参数传递给fn,而我们返回的function中的arguments正是我们需要的参数;
节流
function throttle(fn, interval) {
var last = 0;
var timer = null; // 记录定时器是否已经开启
return function () {
// this和arguments;
var _this = this;
var _arguments = _arguments;
var now = new Date().getTime();
if (now - last > interval) {
if (timer) { //若已经开启,则不需要开启另外一个定时器了
clearTimeout(timer);
timer = null;
}
fn.apply(_this, _arguments);
last = now;
} else if (timer === null) { // 没有立即执行的情况下,就会开启定时器
//只是最后一次开启
timer = setTimeout(function () {
timer = null; // 如果定时器最后执行了,那么timer需要赋值为null
fn.apply(_this, _arguments);
},interval)
}
}
}