如何真的关闭 JS 代码片段?

在写一个 JS ,但我发现关闭代码片段之后这个 JS 还在运行,咋整?

启用代码片段之后会添加一个元素,这个元素在关闭代码片段时会移除,但 JS 却还会持续运行:

image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22251 引用 • 88933 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8074 引用 • 36880 回帖 • 162 关注
2 操作
JeffreyChen 在 2024-09-21 23:18:31 更新了该帖
JeffreyChen 在 2024-09-21 23:14:59 更新了该帖

相关帖子

被采纳的回答
  • wilsons 2

    我通过这个函数实现了判断代码片段是否关闭,不知是否你想要的效果。

    // 判断脚本是否开启
    // 通过唯一标志符判断是否启用此脚本,下面的uuid不要删除,也可以改成其他全局唯一字符串
    // 如果性能更好,可以使用脚本id和这个方法相结合,即把这个uuid改为脚本id,然后先用脚本id判断脚本是否存在,再用keyword判断
    // 也可以通过/api/snippet/getSnippet来判断脚本开启状态,这里采用判断脚本是否存在的方式
    // 调用方式 isEnabled()
    // b6fb408a-d400-4874-b357-06fcdce67ca6
    function isEnabled(keyword = 'b6fb408a-d400-4874-b357-06fcdce67ca6') {
      if(!siyuan.config.snippet.enabledJS) return false;
      const scripts = document.getElementsByTagName('script');
      for (var i = 0; i < scripts.length; i++) {
          if (scripts[i].textContent.indexOf('// ' + keyword) !== -1) {
              return true;
          }
      }
      return false;
    }
    

    然后在 MutationObserver 回调中添加判断

    if(!isEnabled()) {
      if(observer) observer.disconnect();
      if(timeoutId) clearTimeout(timeoutId);
      if(animationFrameRequestId) cancelAnimationFrame(animationFrameRequestId);
      return;
    }
    

    如图

    image.png

    效果

    r59.gif

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons 1

    @JeffreyChen

    把 isEnabled()函数中的

    const scripts = document.head.getElementsByTagName('script');

    改为

    const scripts = document.head.querySelectorAll("script[id^=snippetJS]");

    可大大提高第一次遍历时的性能,毕竟系统库函数啥的文本量还是巨大的,而代码片段的代码往往很小。

  • 其他回帖
  • 在插件里可以监听卸载事件,不知道代码片段有没有相关事件,没有的话自行监听一下。

    防止开发时重复执行的话可以一个用全局变量,插件代码执行时创建一个唯一标志,例如当前时间,当全局变量与该标志不一致时就知道执行新代码了,于是老代码就知道要清理自己了

  • wilsons 3

    👍 我在你的基础上,对这个函数进一步优化,加入了通过 id 判断,遍历脚本仅执行一次。

    // 判断脚本是否开启
    // 通过唯一标志符判断是否启用此脚本,注释中的uuid不要删除,也可以改成其他全局唯一字符串
    // 也可以通过/api/snippet/getSnippet来判断脚本开启状态,这里采用判断脚本是否存在的方式
    // 调用方式 isEnabled()
    let scriptId = '';
    function isEnabled(keyword = 'b6fb408a-d400-4874-b357-06fcdce67ca6') {
      if(!siyuan.config.snippet.enabledJS) return false;
      const script = scriptId ? document.getElementById(scriptId) : null;
      if(script) return true;
      const scripts = document.head.getElementsByTagName('script');
      for (var i = 0; i < scripts.length; i++) {
          // b6fb408a-d400-4874-b357-06fcdce67ca6
          if (scripts[i].textContent.indexOf('// ' + keyword) !== -1) {
            scriptId = scripts[i].id;
            return true;
          }
      }
      return false;
    }
    

    另外,建议不用对整个 body 进行监控,监控 .layout__center 应该就足够了。

    1 回复
  • EmberSky

    我调的时候, 一般也是重新加载, 我还特意在顶栏加了重新加载的按钮

    image.png

  • 查看全部回帖
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器,而不是 Markdown 文件编辑器; 思源笔记同步教程:ld246.com/article/1692089679062

推荐标签 标签

  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 5 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 20 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 26 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 653 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    153 引用 • 3783 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖 • 5 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 334 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 8 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 5 关注
  • 导航

    各种网址链接、内容导航。

    39 引用 • 170 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 41 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • 创业

    你比 99% 的人都优秀么?

    84 引用 • 1399 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    179 引用 • 995 回帖 • 1 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    287 引用 • 4484 回帖 • 668 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 1 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 74 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 166 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 528 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖 • 2 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 209 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 414 关注