异步回调-放置回调函数

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

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

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

});

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

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

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

Square.on(“点击”，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 2

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

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次警报，则不需要param：

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 3

你的设置方式的问题在于：

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

.您正在传递一个匿名函数作为jquery的.on的第二个param。由于这个param是一个有效的函数，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));
});