异步回调 - 放置回调函数

Question

Js 的新手，并尝试在非基于服务器的设置中解决异步回调。 作为一个例子，我创建了两个函数，第一个调用第二个函数。 第一个函数由onclick事件触发，该事件启动 1 秒计时器，然后显示警报。

我试图发生的是，在该警报之后，又过了 3 秒，第二个警报功能应该会触发。但是，我不确定如何正确调用第二个函数。

下面是我的代码。 任何帮助将不胜感激

法典：

$(document).ready(function(){
	
	var square = $('.square');
	
	square.on('click', function(callbackFunction) {
		setTimeout(function() {
			alert('Thanks for waiting');
		}, 1000);
		
		callbackFunction(); //end of callback function
	});//end of square click
	
	function callbackFunction() {
		setTimeout(function() {
			alert('thanks for waiting even longer')
		}, 3000);
	};
	
	
});//end of doc

.square {
	height: 50px;
	width: 50px;
	border: 1px solid;
	position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>

Answer 1

如果你想将回调传递给你的点击处理程序，那么我会这样做：

function clickHandler(callbackFunction) {
setTimeout(function() {
alert('Thanks for waiting');
callbackFunction();
}, 1000);
}
function callbackFunction() {
setTimeout(function() {
alert('thanks for waiting even longer')
}, 3000);
};
square.on('click', function()  {
clickHandler(callbackFunction);
});

如果您只需要在 1 个警报之后显示 2 个警报，则不需要参数：

function clickHandler() {
setTimeout(function() {
alert('Thanks for waiting');
callbackFunction();
}, 1000);
}
function callbackFunction() {
setTimeout(function() {
alert('thanks for waiting even longer')
}, 3000);
};
square.on('click', clickHandler);

Answer 2

您无法控制事件侦听器的回调函数的签名，因此无法向其传递函数。它总是传递事件本身的副本，所以我们通常这样写：

square.on('click', function(event) {
});

有些人使用e而不是event，名称并不重要，但它始终是事件的副本。

调用函数时，调用代码将在此处停止，执行函数，获取返回值(如果有)，然后继续。但是，当您调用异步函数时，您的代码将调用该函数并继续，而无需等待它完成。由于您的代码没有等待函数，因此它无法获取其返回值或任何已完成的指示。为了获得它，我们使用一个回调函数，当异步函数完成其工作时，它由异步函数调用。这就像说，做你的工作，完成后给我回电话。

回到上面的click事件，第二个参数接受一个函数作为回调函数。这就像说：当事件发生时(有人点击元素)，调用这个回调函数。我们可以给它传递一个匿名函数(一个没有名字的函数)，如上例所示，或者我们给它传递一个函数的名称，如下所示：

square.on('click'， callbackFunction);

请注意，我们只传递名称，不传递括号。因为我们不执行函数，所以我们只是告诉事件侦听器事件发生时它需要调用的函数的名称。

这是修复的完整代码。我重命名了您的函数以使其更清晰。第二个函数不是回调函数，我们直接调用它：

$(document).ready(function() {
$('.square').on('click', callbackFunction);
function callbackFunction() {
setTimeout(function() {
alert('Thanks for waiting');
secondFunction(); //calling the second function
}, 1000);
}
function secondFunction() {
setTimeout(function() {
alert('thanks for waiting even longer')
}, 3000);
}
});

.square {
height: 50px;
width: 50px;
border: 1px solid;
position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>

Answer 3

您设置方式的问题在这里：

square.on('click', function(callbackFunction) { ... 

。您正在传递一个匿名函数作为 jQuery.on的第二个参数。 由于此参数是一个有效的函数，jQuery 调用它，将一个events对象(表示用户单击操作的详细信息)作为第一个参数传入，您将其错误地命名为"callbackFunction"。events对象本身不是函数，因此当您尝试在两行后像函数一样执行它时：

callbackFunction();

它错误。

您在问题中没有指定任何浏览器要求，并且由于 dhilt 用更传统的 js (+1) 回答，我想我会展示如何使用更现代的 js 语法(使用 es6 箭头函数)来解决这个问题：

$(document).ready(function(){  
$('.square').on('click', () => setTimeout(() => {
alert('thanks for waiting');
setTimeout( () => alert('thanks for waiting even longer'), 3000 );
}, 1000));
});