js 防抖与函数节流 注释版

自己在学习中对防抖和函数节流的理解,以下注释可能比较啰嗦或者比较难懂。

// 防抖  
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)  
 }} // 函数调用就不在这里重复了,和防抖一样。

你可能感兴趣的:(javascript,前端,jquery)