自己在学习中对防抖和函数节流的理解,以下注释可能比较啰嗦或者比较难懂。
// 防抖
function noShake(fn, time) { // 闭包,可以理解成内层函数引用 外层函数作用域的 变量的 函数,内层必须是个函数。
var shake = null; // 闭包声明变量,供内层函数使用,此处防抖与节流存在明显区别。
return function () {
console.log(shake);
if (shake) { // 判断shake true 还是 false(null,还是settimeout)。如果是true 则清除 定时器
clearTimeout(shake);
} // 重:如果在 time 时间内重复调用了此方法,则清除定时器,以下代码将重新赋值定时器。
// 重:可以理解成在time内无论我点击多少次都在我停止点击以后的time 时间后执行定时器。
shake = setTimeout(function () { // 无论shake 为何值 此处都将重新给shake 赋值定时器
console.log(this); // 当前this 指向window
fn.apply(this, arguments); // 改变fn的this 指向,防止内层函数调用 fn中this 被改变。
shake = null; // 执行完成后清空shake
}, time)
}}
function fn() { // 防抖执行函数
console.log('我是防抖');
}
var fn1 = noShake(fn, 1000); // 调用noShake 返回内层函数
$('.abc').on('click', function () { // 事件触发
fn1()
})
// 函数节流
function throttle(fn, time) {
var status = false; // 此处和防抖不同
return function () {
// 重: 节流和防抖最大的不同在这里,防抖清除了定时器,但是节流没有,定时器还在执行。
// 只有在time时间内执行完定时器,status 才会变为false。如果在time内重复调用则将退出函数执行,直到上一个定时器执行完成。
if (status) {
return false;
} status = true;
setTimeout(function () {
fn.apply(this, arguments);
status = false;
}, time)
}} // 函数调用就不在这里重复了,和防抖一样。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。