防抖节流提高性能

最新推荐文章于 2024-11-08 16:09:18 发布

AcAZww

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量83

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/AcAZww/article/details/125058498

版权

本文深入探讨JavaScript中的节流和防抖技术，用于优化高频率触发的函数执行。节流通过设置冷却时间确保在特定间隔内只执行一次，而防抖则确保在连续触发后只执行最后一次。这两种方法常用于改善用户输入响应、滚动事件处理等场景，以提高页面性能。通过实例代码展示了节流和防抖的实现，并提供了直观的区别与联系解释。

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

JS 节流

节流的意思是让函数有节制地执行使用思想最大负载量之前只能执行一次定义：在一定时间内，在动作被连续频繁触发的情况下，CD好之前只能用一次

参考：英雄联盟。

在这里插入图片描述

//函数节流
var r = function () {
  console.log("薇恩开启大招 一秒隐身 进入夜行  收割时刻");
};
function lolHeroskill(fn, delay) {
  let cd = true;
  return function () {
    if (cd) {
      fn();
      cd = false;
      setTimeout(() => {
        cd = true;
      }, delay);
    } else {
        console.log('我进来else里面了')
    }
  };
}
const use = lolHeroskill(r, 3000);
use();
use();
use();
use();
use();
use();
use();
use();
use();
use();


//防止用户连续事件

在这里插入图片描述

JS防抖

定义：在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次。主要区别节流是第一次就已经把你截住了就像英雄联盟的大招CD 第一下按马上截住防抖是针对一段的时间的最后一次

function shuaka(fn, delay){
    let timerId = null
    return function(){
        if(timerId){window.clearTimeout(timerId)}
        timerId = setTimeout(()=>{
            fn()
            timerId = null
        },delay)
    }
}
const startshuaka = shuaka(()=>console.log('最后一个人上车了 公交可以开了'),5000)

startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()