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

本贴最后更新于 236 天前,其中的信息可能已经时过境迁

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

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

image.png

  • 思源笔记

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

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

    25523 引用 • 105573 回帖 • 1 关注
  • Q&A

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

    9766 引用 • 44433 回帖 • 88 关注
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 回复
  • llej 1 via Android

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

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

  • 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 回复
  • HugZephyr

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

    image.png

  • wilsons 1

    @JeffreyChen

    把 isEnabled()函数中的

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

    改为

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

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

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

推荐标签 标签

  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注
  • OAuth

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

    36 引用 • 103 回帖 • 29 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 749 回帖
  • SEO

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

    35 引用 • 200 回帖 • 31 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 2 关注
  • uTools

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

    7 引用 • 27 回帖
  • gRpc
    11 引用 • 9 回帖 • 92 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 396 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 650 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 670 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    195 引用 • 291 回帖 • 373 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 257 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 76 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 337 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 5 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 158 关注
  • 反馈

    Communication channel for makers and users.

    121 引用 • 907 回帖 • 273 关注
  • OneDrive
    2 引用
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    181 引用 • 821 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖 • 1 关注
  • 正则表达式

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

    31 引用 • 94 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 122 关注
  • 叶归
    8 引用 • 38 回帖 • 18 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 183 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    99 引用 • 367 回帖
  • 服务器

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

    125 引用 • 585 回帖