javascript - 类似 "DOMLastNodeRemoved"的事件可防止代码多次执行

Question

首先:我知道有一些与此类似的问题，但我找不到任何替代方案，只能询问。

你好!

是否有像“DOMLastNodeRemoved”(或 FirstNode，因为你无法确定它何时是最后一个被删除的节点)之类的事件来防止代码的多次执行？

事情是这样的，我正在使用 Genexus。在这个奇怪的 SPA 概念中使事件起作用的唯一方法是使用 DOMNodeRemoved 事件。但每当你点击一个按钮时，它就会插入很多节点，使函数执行 25 次而不是一次。

让我们看一个例子:

我目前使用此代码:

$(document).on("DOMNodeRemoved", function() {
$(".Button").click(function() {
    setTimeout(
        function() {
            toastrgx();
            $('.gx-warning-message').css('display', 'none');
        }, 800);
});
function toastrgx() {

    var meuLoader = new Loader($);
    meuLoader.Insert();

    setTimeout(function() {
        meuLoader.Remove();
        var text = $('.gx-warning-message').text();
        toastr.error(text, '');

    }, 500);

    };
});

我需要使用超时，因为 DOM 仍在加载消息。

无论如何，通过这段代码，我将得到图像中显示的结果:

如果我使用像preventPropagation这样的东西(至少是我使用的方式)，它只会运行我的代码一次，但会在控制台中返回很多错误(每次执行一个错误)，并且还会破坏我的加载程序。顺便说一句，我只能控制一个自定义脚本，其他所有内容均由 Genexus 生成。
因此，如果我使用任何其他普通事件(例如 document.ready)，它将在我第一次在 MasterPage 中加载页面时触发，但是，如果我单击任何其他页面，它不会再次触发该事件。

所以，我的问题是:

在我的例子中，有什么方法可以只执行一次代码吗？
是否是我没有清楚地看到其他事件或使代码正常工作的另一种方式？

如果这个问题听起来很愚蠢，抱歉，我是 JS 的新手。

Answer 1

这种情况下的方法是创建一个 User Control并使用其 show函数，每次控件应更新时(例如，加载页面或修改控件的属性时)，由生成的应用程序执行。

为什么需要用户控件？

用户控件提供了一个标准接口(interface)来与 GeneXus 生成的应用程序进行互操作。这个界面不错documented并使您从生成的应用程序的内部运作中抽象出来。

如果您尝试通过包含脚本来扩展 GeneXus，您将面临意外的行为和更改，恕不另行通知。

如何创建用户控件

要创建用户控件，我建议使用 GeneXus User Control Generator ，对于原子。使用此 Atom 包，您可以轻松创建 GeneXus 用户控件。

关注steps to create a User Control并选择Web当程序包提示支持的平台时。

如何让代码在页面加载时只执行一次

创建用户控件后，打开src/<YourUserControlName>Render.js文件并编辑 show功能如下:

this.show = function() {
  if (!this.IsPostBack) {
    // This code will be executed only, when the page is loaded.
  }
}

if内您可以编写任何需要的代码，每页只需执行一次。

如何部署用户控件

要构建用户控件并将其部署到您的 GeneXus 安装目录，请按照 build process steps 操作。包文档中有描述。

部署用户控件后，您应该将其包含在母版页对象中以开始使用它，而不是您现在使用的脚本。