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

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

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

image.png

  • 思源笔记

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

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

    22337 引用 • 89380 回帖
  • Q&A

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

    8112 引用 • 37001 回帖 • 160 关注
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 回复
  • 在插件里可以监听卸载事件,不知道代码片段有没有相关事件,没有的话自行监听一下。

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

  • wilsons 1

    楼上说的没错,这要看代码的具体内容是什么。

    如果绑定了事件,需要解绑,我通常是执行前先解绑再绑定,这样不用担心可能的意外执行被多次绑定的问题。

    如果有定时任务啥的需要给个取消的条件,如果不好确定,最方便的是通过全局变量。

    如果有监听,要先 disconnect。

    1 回复
  • zxhd86 1 赞同

    很简单,刷新一下思源就行了。

    建议使用插件 开发者工具 的重载窗口功能。

    1 回复
  • 代码是这个,有定时器和 MutationObserver :

    [js] 限制数据库换行文本最大行数

    1 回复
    1 操作
    JeffreyChen 在 2024-09-22 01:47:50 更新了该回帖
  • 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

    1 回复
    1 操作
    wilsons 在 2024-09-22 07:08:11 更新了该回帖
  • 对,非常感谢。另外我改为只遍历 head 元素下的 script 标签:

    // 判断脚本是否开启
    // 通过唯一标志符判断是否启用此脚本,下面的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.head.getElementsByTagName('script'); // 只遍历 head 元素下的 script 标签
        for (var i = 0; i < scripts.length; i++) {
            if (scripts[i].textContent.indexOf('// ' + keyword) !== -1) {
                return true;
            }
        }
        return false;
    }
    
    1 回复
  • 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

  • wilsons 1

    @JeffreyChen

    把 isEnabled()函数中的

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

    改为

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

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

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

推荐标签 标签

  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    944 引用 • 1459 回帖 • 17 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 483 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    69 引用 • 372 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 1 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 362 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 212 关注
  • 招聘

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

    190 引用 • 1057 回帖
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 302 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 175 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    6 引用 • 14 回帖 • 2 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • Q&A

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

    8112 引用 • 37001 回帖 • 160 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 22 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 680 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 587 关注
  • danl
    132 关注
  • Gitea

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

    4 引用 • 16 回帖 • 5 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 742 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • SOHO

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

    7 引用 • 55 回帖 • 19 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 136 关注