常用的JS装饰器函数记录 --- 缓存，防抖，节流 --- 持续更新···

最新推荐文章于 2024-07-19 18:19:33 发布

wincheshe

最新推荐文章于 2024-07-19 18:19:33 发布

阅读量693

点赞数

分类专栏：前端 -- 手写工具类函数文章标签： javascript 缓存前端

本文链接：https://blog.csdn.net/m0_52409770/article/details/123190331

版权

前端 -- 手写工具类函数专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中用于优化函数性能的三种技术：缓存装饰器，通过保存函数结果来避免重复计算；防抖装饰器，限制函数在一定时间内频繁调用；以及节流装饰器，确保函数在单位时间内只执行一次。这些技术在前端性能优化中起到关键作用。

摘要由CSDN通过智能技术生成

1、缓存函数

实现功能：

当第一次函数调用，保存该函数

第二次调用传相同参数时，直接输出缓存结果优化性能

let worker = {
  slow(min, max) {
    console.log(`Called with ${min},${max}`);
    return min + max;
  }
};

function cachingDecorator(func) {
  // 用map来保存缓存
  let cache = new Map(); 
  return function() {
    // 用hash来记录参数
    let key = hash(arguments); 
    if (cache.has(key)) {  //  如果有缓存该函数并且参数相同
      return cache.get(key); //  返回同样结果
    }

    // 记录第一次函数的结果
    let result = func.call(this, ...arguments); 

    // 保存下结果，与函数参数
    cache.set(key, result);
    // 返回第一次的结果
    return result;
  };
    function hash(args) {
      // 参数的拼接
      return [].join.call(args) // 3,5
    }
}


// 将函数用缓存包装
worker.slow = cachingDecorator(worker.slow);

console.log( worker.slow(3, 5) ); // works
console.log( "Again " + worker.slow(3, 5) ); // 从 (cached) 中获取的参数 第二次没用调用slow

2、防抖装饰器（debounce）

假设delay为1秒

在单位时间（> 1）内事件触发的间隔时间小于 1 秒的都不执行

function doubounce (func,delay){
    let timer = null
    return function(...args){
        if(timer)  clearTimeout(timer)
        timer = setTimeout(()=>{
            func.apply(this,args)
        },delay)
    }
}

// 用防抖装饰器包装后的函数再使用就有防抖作用
let xxx = doubounce(func,delay)
xxx('args')

3、节流装饰器（throttle）

在单位时间（>1）内不论事件触发多少次都只会在1秒后执行一次

function throttle(func,delay){
	let timer 
	return function(...args){
		if(!timer){
			timer = setTimeout(() => {
				timer = null
				func.apply(this,args)
			}, delay);
		}
	}
}

// 用节流装饰器包装后的函数再使用就有节流作用
let xxx = throttle(func,delay)
xxx('args')