【js】使用window.addEventListener后报错 Cannot read properties of null (reading ‘getAttribute‘)的解决方法

2023-10-27

场景:使用window.addEventListener('resize', function() {})给echarts图表做自适应,但是在切换路由时,其他页面的控制台会疯狂报错:Cannot read properties of null (reading 'getAttribute')

原因:内存泄漏,使用 window.addEventListener 添加的事件监听器,在不需要时应该进行清除,以避免潜在的内存泄漏问题

解决方法:window.removeEventListener

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});

function handleResize() {
  nextTick(() => {
    riskNumRefList.value?.forEach((item: any) => {
      if (!isEmpty(item)) {
        nextTick(() => {
          item.drawchart();
        });
      }
    });
    riskSpreadRefList.value?.forEach((item: any) => {
      if (!isEmpty(item)) {
        nextTick(() => {
            item.drawchart();
          });
      }
    });
  });
}

onMounted(() => {
  handleLoad();
  window.addEventListener("resize", handleResize);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【js】使用window.addEventListener后报错 Cannot read properties of null (reading ‘getAttribute‘)的解决方法 的相关文章

  • 正则表达式中的“g”标志是什么意思?

    的含义是什么g正则表达式中的标志 之间有什么区别 g and g用于全局搜索 这意味着它将匹配所有出现的情况 通常你还会看到i这意味着忽略大小写 参考 全局 JavaScript MDN https developer mozilla or
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section
  • 动态表中每个按钮的 Jquery-Ui 对话框表单

    我正在生成一个 HTML 表 每行都有一个按钮 必须打开 Jquery ui 对话框表单 The table table class table table reporting table condensed table striped t
  • 将数组转换为具有默认值的对象的更简洁方法? (洛达什可用)

    我有一个数组 比如说 a b c 我想将其转换为一个对象 该对象以数组值作为键和我可以设置的默认值 所以如果默认值是true 我希望我的输出是 a true b true c true 下面的代码是否有更简洁的版本来实现此目的 var my
  • 如何为 HTML5 音频元素制作加载栏?

    我正在尝试为 HTML5 音频元素制作一个加载栏 显示加载 缓冲的百分比 对于视频标签 可以使用以下方法进行计算 video buffered end 0 video duration 但我无法让它与音频标签一起使用 它只是返回一个固定值
  • 卸载/销毁 Angular 延迟加载组件

    我的设置与此处找到的帖子类似http ify io lazy loading in angularjs http ify io lazy loading in angularjs 处理 Angular 中我的应用程序的各种组件的延迟加载 我
  • 如何在一段特定时间后在后台运行 ajax 调用? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想在一段特定的时间后显示警报消息 您想继续吗 如果用户同意 则 ajax 调用必须在后台运行 否则取消 ajax 调用 那么请告诉我
  • Rails 递归地包含 javascripts 资源文件夹

    我了解如何将一个 JavaScript 文件添加到 Rails 资产管道中 只需添加 require filename 到 application js 但是如何在一个文件夹下包含多个 javascript 文件 vendor assets
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • 获得一次性绑定以适用于 ng-if

    这个问题已经被之前问过 https stackoverflow com questions 23969926 angular lazy one time binding for expressions 但我无法让该解决方案发挥作用 所以我想
  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数?

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr
  • 带时间戳的 Firestore 查询

    如果它是文本字段 我可以使用 where 条件获取数据 但是当我尝试对时间戳字段和日期执行相同操作时 事情不起作用 这是我的代码 home ts firebase firestore collection cities where time
  • 从相机视图中拖动锁定在一定距离/半径处的对象

    我在场景中心有一个相机 距离相机 z 400 处有 1 个球体 其父级位于中心 我想从视图中向上 向下 向左 向右拖动球体 但同时不改变它相对于中心的 z 位置 我最终使用了另一个球体并使其不可见 添加side THREE DoubleSi
  • JavaScript 访问密码字段值是否被视为存在安全风险?

    如果安全 正确地存储密码是良好的风格和安全性 那么对于要求用户输入密码的网页来说不应该也是如此吗 考虑这个例子
  • PhantomJS 网页内存消耗?

    是否有一种编程方式 因为我想在运行时自动执行 方式来查看网页在通过 PhantomJs 运行时使用了多少内存 我也在使用 casperjs 如果这有帮助的话 我已经搜索了很多但没有找到任何方法 PhantomJs 使用 QtWebKit 因
  • 如何在 JavaScript 中对关联数组进行排序?

    我需要为我的一个项目通过 JS 对关联数组进行排序 我发现这个函数在 Firefox 中运行得很好 但不幸的是它在 IE8 OPERA CHROME 中不起作用 无法找到使其在其他浏览器中运行的方法 或者找到另一个适合该目的的函数 我真的很
  • 如何修复nodejs Express服务器中的“MulterError:意外字段”?

    我正在设置一个服务器来从客户端上传 zip 文件 服务器运行express和multer来执行此操作 上传文件时 服务器抛出 MulterError 意外字段 错误 我无法弄清楚是什么导致了它 我尝试过使用 png 图像 效果很好 但对于
  • 在 JSP 或 Javascript 中清除浏览器缓存中的图像

    我正在为一所大学开发JSP Web 应用程序 用户页面中显示人员图片 用户注销后如何从网络浏览器缓存中清除这张图片 使用 JSP 或 JavaScript 那是不可能的 最好的选择是完全禁用相关资源的缓存 创建一个filter https
  • 如何设置 Firebase 用户的显示名称?

    根据Firebase网站上的JS Auth文档 它只展示了如何获取 displayName 以及如何更新 displayName 所以我尝试更新它 但这有点不合逻辑 因为你怎么能在不创建某些东西的情况下更新它呢 所以我的问题是 如何设置注册

随机推荐

  • 基于 Web 的 LDAP 认证,访问资源就是这么安全

    轻量级目录访问协议 即 LDAP 协议 是微软 Active Directory AD 和 OpenLDAP 等传统身份管理解决方案中的核心身份认证协议 然而 IT 环境的不断发展暴露了传统方案的问题 基于本地部署的设计逻辑无法适应新兴的云
  • Unity2D游戏无限刷新地图

    关于Unity2D游戏如何无限刷新地图的问题 首先在Unity中创建多个大小相同的物体当做刷新的地图对象 然后在创建一个名称为Endless cs的脚本 然后添加如下代码 public float distance void OnBecam
  • cmake(三十五)Cmake之include指令

    一 CMakeLists txt和cmake脚本的联系和区别 cmake脚本 1 cmake文件里面通常是 什么信息 information cmake文件 里包含了一些 公共 复用 的 cmake命令 和一些 宏 函数 当CMakeLis
  • java开发团队认知_一个优秀的研发团队应该具备什么特征

    1 计划执行 计划安排得当 不要老加班 不要老是现实和计划不匹配 不要做到哪儿计划就推后到哪儿 2 研发成果 成功产出几个重影响力级别的 完整成块的 有成就感自豪感的产品或项目 3 团队氛围 这个团队每个人都相处的很融洽 4 团队协作 每个
  • Pytorch 的 LSTM 模型的简单示例

    1 代码 完整的源代码 import torch from torch import nn 定义一个LSTM模型 class LSTM nn Module def init self input size hidden size num l
  • C. Doremy‘s IQ(二分/贪心)

    题目 题意 给定n个任务和艾米的智商q 艾米要按顺序处理这n个任务 每个任务有难度值a i 对于每个任务 艾米可以选择处理 也可以选择不处理 如果艾米当前的智商q大于等于任务a i 则艾米可以直接处理该任务 智商不受任何影响 如果艾米当前的
  • SpringCloud——微服务

    微服务技术栈 在之前的开发过程中 我们将所有的服务都部署在一台服务器中 当我们的服务开始越来越多 业务越来越复杂 当一台服务器不能承担我们的业务的时候 就需要将不同的业务分开部署在不同的服务器上 这每一个单独分离的服务 就是微服务 这些搭载
  • 数据结构 常见的八大数据结构汇总 为什么要学习数据结构?解读数据结构!进阶必看!

    文章目录 什么是数据结构 概念解释 为什么要学习数据结构 常见的数据结构 0 数组 1 链表 2 栈 3 队列 4 树 5 散列表 又叫哈希表 6 堆 7 图 思维导图 横向 纵向 什么是数据结构 数据结构 Data Structure 是
  • 使用Arduino开发ESP32:串口(Serial port) HardwareSerial库使用说明

    HardwareSerial库使用 使用演示 上图中通过HardwareSerial库实现了对串口1的使用 具体说明见下文 详细说明 使用HardwareSerial库需要先声明一个对象 例如上文图中的HardwareSerial mySe
  • MySQL基本操作(三)

    MySQL基本操作 三 看过MySQL基本操作 二 的应该已经体会到mysql数据库下user表的妙用了 我相信你也已经做过一些尝试了 比如自建用户名无需密码登录 自建任意主机登录等等 这样的尝试会增加你对mysql的兴趣 Ok 你第一次登
  • VC得到当前目录与得到应用程序目录的一个应用

    得到当前目录的函数 GetCurrentDirectory 得到应用程序目录的函数是 GetModuleFileName 用法都很简单 不知道就看MSDN吧 我先用这2个函数分别写一个实现同一个功能的函数 以下是代码片段 函 数 名 Rea
  • Candy算法--理解

    Canny边缘检测算子的目标是找到一个最优的边缘检测算法 最优边缘检测的含义是 好的检测 算法能够尽可能多地标识出图像中的实际边缘 好的定位 标识出的边缘要与实际图像中的实际边缘尽可能接近 边缘过粗 难以精确定位 最小响应 图像中的边缘只能
  • kafka中partition数量与消费者对应关系以及Java实践

    kafka是由Apache软件基金会开发的一个开源流处理平台 kafka是一种高吞吐量的分布式发布订阅消息系统 它可以处理消费者在网站中的所有动作流数据 kafka中partition类似数据库中的分表数据 可以起到水平扩展数据的目的 比如
  • wifi服务器dns未响应,wifi显示dns未响应怎么解决

    产品型号 ASUS S340MC 系统版本 Windows 10 1 先重启电脑试试 或者将路由器关掉重新打开 2 设置系统网络服务 1 点击电脑左下角的 开始 找到并点击 设置 2 在Windows设置界面点击 网络和Internet 接
  • 如何通过python实现一个web自动化测试框架?

    要实现一个web自动化测试框架 可以使用Python中的Selenium库 它是最流行的Web应用程序测试框架之一 以下是一个基本的Python Selenium测试框架的示例 如果你想学习更详细的web自动化测试教程 我这边给你推荐一个详
  • Ant Design Pro V4 修改请求配置(api改为服务器地址 请求Content-Type改为form)

    修改api地址 Ant Design Pro 如果 dev 环境要接入自己的服务端api 需要修改 config proxy ts 中的代理设置 原配置 dev api target https preview pro ant design
  • Flutter中的widget

    StatelessWidget和 StatefulWidget是 flutter的基础组件 日常开发中自定义 Widget都是选择继承这两者之一 也是在往后的开放中 我们最多接触的Widget StatelessWidget 无状态的 展示
  • 小新700黑苹果_联想小新Pro14、Pro13、YOGA 14s 2021都有啥区别——联想的刀工

    结论 小新Pro13 13寸爆款 2 5K屏幕 35W散热 小新Pro14 14寸爆款 2 2K屏幕 38W散热 YOGA 14s 14寸旗舰 2 8K高刷新率屏幕 38W散热 从小新Pro13说起 联想2019年发布的小新Pro13这个机
  • Window入侵排查思路

    一 开机启动项 1 在Windows系统中查看启动项 首先要排查的就是开机自启项 开始菜单里的程序中的自启 C Users Administrator AppData Roaming Microsoft Windows StartMenu
  • 【js】使用window.addEventListener后报错 Cannot read properties of null (reading ‘getAttribute‘)的解决方法

    场景 使用window addEventListener resize function 给echarts图表做自适应 但是在切换路由时 其他页面的控制台会疯狂报错 Cannot read properties of null readin