如何在JavaScript中创建一次性事件

有时，一个事件只需要在页面中调用一次即可。 例如，单击缩略图以加载并播放视频文件，或者单击“更多”图标，以通过Ajax检索并显示其他内容。 但是，您可能已经定义了一个事件处理程序，每次执行该操作时都会调用该事件处理程序。 充其量，它的效率有些低下，并且浏览器会保留不必要的资源。 在最坏的情况下，您的处理程序可能会执行意外操作或重新加载已经可用的数据。

幸运的是，使用JavaScript创建一次性事件处理程序相对容易。 过程：

1. 将处理程序分配给事件，例如单击元素。
2. 单击该元素后，处理程序将运行。
3. 处理程序已删除。 对该元素的进一步单击将不再调用该函数。

jQuery的

首先让我们看一下最简单的解决方案。 如果您使用的是jQuery，则有一个鲜为人知的one()事件绑定方法可以实现一次性事件。

$("#myelement").one( "click", function() { alert("You'll only see this once!"); } );

它与其他jQuery事件方法的用法相同。 有关更多信息，请参阅api.jquery.com/one/ 。

自动搬运机

如果您使用的是原始JavaScript，则任何处理程序函数都可以使用单行代码删除自身：

document.getElementById("myelement").addEventListener("click", handler);

// handler function
function handler(e) {
	// remove this handler
	e.target.removeEventListener(e.type, arguments.callee);

	alert("You'll only see this once!");
}

假设您的处理程序事件参数名为“ e”，则该行如下：

e.target.removeEventListener(e.type, arguments.callee);

将在第一次调用处理程序时将其删除。 您为处理程序使用哪种事件类型或名称都没有关系-它甚至可能是嵌入式匿名函数。

注意我使用了标准事件调用，该事件调用在IE8及以下版本中不起作用。 OldIE需要调用detachEvent ，而类型则需要使用“ on”前缀，例如“ onclick”。 但是，如果您支持oldIE，则可能使用的是jQuery或您自己的自定义事件处理程序。

如果您需要一些灵活性，例如，您只想摘机某些事件类型或在不同的条件（例如两次或多次单击）之后删除该处理程序，则自动删除处理程序可能是最佳选择。

一次性事件创建功能

像我一样，您可能太懒惰或健忘，无法向每个处理函数添加事件删除行。 让我们创建一个onetime函数，它的辛勤工作为我们：

// create a one-time event
function onetime(node, type, callback) {

	// create event
	node.addEventListener(type, function(e) {
		// remove event
		e.target.removeEventListener(e.type, arguments.callee);
		// call handler
		return callback(e);
	});

}

现在，只要需要一次性事件，就可以使用此功能：

// one-time event
onetime(document.getElementById("myelement"), "click", handler);

// handler function
function handler(e) {
	alert("You'll only see this once!");
}

尽管您不必在每个页面中都需要一次性事件，但是很高兴发现有一些可供JavaScript开发人员使用的选项。

From: https://www.sitepoint.com/create-one-time-events-javascript/