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（＆＃39;点击＆＃39;，callbackFunction）;

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

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

＆＃13;

$(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);
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您设置方式的问题在于：

function demo(var1,var2,var3,var4){

    // custom code and calculation here 

}

    //In your case you can use above function like this

function getFinancialData(ticker,r,x,y){
// your above calculation here
}

  // call the getFinancialData and pass the dynamic value of ticker, r,x and y

   getFinancialData(ticker,r,x,y);

...你正在传递一个匿名函数作为jquery square.on('click', function(callbackFunction) { ...的第二个参数。由于这个param是一个有效的函数，jQuery会调用它，传递一个.on对象（代表用户点击操作的详细信息）作为第一个参数，你将其命名为＆＃34; callbackFunction参数＆＃34 ;. events对象本身不是一个函数，所以当你尝试像函数一样执行它时两行：

events

它错误。

你没有在你的问题中指定任何浏览器要求，并且由于dhilt回答了更传统的js（+1），我想我将展示如何使用更现代的js语法解决这个问题（使用{ {3}}）：

 callbackFunction();

异步回调 - 放置回调函数

3 个答案: