Question

正在阅读文档中提到的Promise的第一个例子

const promise = new Promise(function(resolve, reject) {
	var result = 1;

	// This could also be a web request, or anything else either synchronous or asynchronous
	setTimeout(function() {
		result += 10;

		resolve(result);
	}, 1000);

	document.body.addEventListener("click", function clickHandler() {
		document.body.removeEventListener("click", clickHandler);

		reject("You clicked");
	});

	document.body.innerText = "Working... Click anywhere to reject the promise with an error.";
});

promise.then(function(value) {
	document.body.innerText = "Everything went fine! The Promise resolved with: " + value;
}).catch(function(error) {
	document.body.innerText = "Something went wrong: " + error;
});

body {
    margin: 0;
    padding: 8px;
    min-height: 100vh;
    box-sizing: border-box;
}

为什么需要这个语句，如果不存在，它会对Promise产生什么影响？为什么需要删除监听器？

document.body.removeEventListener("click", clickHandler);

Answer 1

如果没有这一行，代码仍然有用：

 document.body.removeEventListener("click", clickHandler);

不同之处在于第二次点击仍会调用 clickHandler 函数，该函数将第二次调用 reject 函数。但是，承诺会在完成后忽略对拒绝和解决的调用，因此第二次单击无效。

但是，当听众不再具有实际用途时，删除听众是明智的：

避免性能下降。无用的代码将不再被执行，因此不会延迟可能绑定到同一事件的任何其他（但有用的）侦听器的执行。如果库也会将未使用的侦听器附加到多个元素上，或者循环会重复地将侦听器绑定到元素上，那么事情可能会在响应性方面失控。
可以通过垃圾收集器释放分配给promise构造函数回调创建的闭包的内存。只要侦听器绑定到click事件，不仅需要在内存中维护该事件处理程序，还有提供拒绝函数引用的上下文。如果 promise 变量超出范围，则甚至是这样。只有 - 当 - 删除事件侦听器时，事件处理程序和拒绝函数不再存在引用，因此可以释放内存。如果那时不再引用 promise 变量，那么整个承诺也可以被垃圾收集。

承诺Stackoverflow文档的示例

1 个答案: