如何在Javascript中创建异步函数?

2022-08-30 02:42:38

查看此代码

<a href="#" id="link">Link</a>
<span>Moving</span>

$('#link').click(function () {
    console.log("Enter");
    $('#link').animate({ width: 200 }, 2000, function() {
         console.log("finished");            
    });    
    console.log("Exit");    
});

正如您在控制台中看到的,“animate”函数是异步的,它“分叉”了事件处理程序块代码的流。事实上:

$('#link').click(function () {
    console.log("Enter");
    asyncFunct();
    console.log("Exit");    
});

function asyncFunct() {
    console.log("finished");
}

遵循块代码的流程!

如果我希望用这种行为创建我的,我怎么能用javascript / jquery来做呢?我认为有一种不使用的策略function asyncFunct() { }setTimeout()


答案 1

您无法创建真正自定义的异步函数。您最终将不得不利用原生提供的技术,例如:

  • setInterval
  • setTimeout
  • requestAnimationFrame
  • XMLHttpRequest
  • WebSocket
  • Worker
  • 一些HTML5 API,如File API,Web Database API
  • 支持的技术onload
  • ...许多其他

实际上,对于动画jQuery使用.setInterval


答案 2

您可以使用计时器:

setTimeout( yourFn, 0 );

(其中是函数的引用)yourFn

或者,使用Lodash

_.defer( yourFn );

推迟调用 ,直到当前调用堆栈清除。调用时会提供任何其他参数。funcfunc