vue 防抖

最新推荐文章于 2024-07-18 11:26:46 发布

不就是个div嘛

最新推荐文章于 2024-07-18 11:26:46 发布

阅读量266

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签： vue.js canvas

本文链接：https://blog.csdn.net/m0_48940868/article/details/116982392

本文介绍了在Vue项目中遇到的频繁触发导致性能问题的现象，通过对比初级的setTimeout解决方案和常规的防抖(debounce)处理，详细阐述了如何实现一个防抖函数，并将其应用在window.resize事件中，以优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题现象描述

初级处理办法（没啥用）

window.addEventListener("resize", () => {
  setTimeout(() => {
 // 需要执行的代码块
},500)
      
      });

只是在里面套了个 setTimeout 这样的结果只是减少了图片闪的频率，但是还是会闪

常规处理办法（防抖）

【1.】先写一个 debounce 防抖函数

debounce(fn, delay) {
      let time = null;
      let timer = null;
      let newTime = null;
      function task() {
        newTime = +new Date();
        if (newTime - time < delay) {
          timer = setTimeout(task, delay);
        } else {
          fn();
          timer = null;
        }
        time = newTime;
      }
      return function () {
        // 更新时间戳
        time = +new Date();
        if (!timer) {
          timer = setTimeout(task, delay);
        }
      };
    },

【2.】在 window.resize 里