上一个功能完成后调用一个功能

2020/10/20 22:41 · javascript ·  · 0评论

我有以下JavaScript代码:

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable);
        function2(someOtherVariable);
    }
    else {
        doThis(someVariable);
    }
});

我如何确保function2仅在function1完成后调用

指定一个匿名回调,并使function1接受它:

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable, function() {
          function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
  ...do stuff
  callback();
} 

如果您使用的是jQuery 1.5,则可以使用新的Deferreds模式:

$('a.button').click(function(){
    if(condition == 'true'){
        $.when(function1()).then(function2());
    }
    else {
        doThis(someVariable);
    }
});

编辑:更新了博客链接:

丽贝卡·墨菲(Rebecca Murphy)在这里对此进行了出色的撰写:http : //rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

尝试这个 :

function method1(){
   // some code

}

function method2(){
   // some code
}

$.ajax({
   url:method1(),
   success:function(){
   method2();
}
})

该答案使用promises,是ECMAScript 6标准的JavaScript功能如果目标平台不支持promises,请用PromiseJs填充

承诺是一种处理JavaScript中异步操作的新方法(更好的方法):

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable).then(function() {
            //this function is executed after function1
            function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
    return new Promise(function (fulfill, reject){
        //do stuff
        fulfill(result); //if the action succeeded
        reject(error); //if the action did not succeed
    });
} 

对于这个简单的示例,这似乎是一笔巨大的开销,但是对于更复杂的代码,这比使用回调要好得多。您可以使用多个then语句轻松地链接多个异步调用

function1(someVariable).then(function() {
    function2(someOtherVariable);
}).then(function() {
    function3();
});

您还可以轻松包装jQuery延迟(从$.ajax调用返回):

Promise.resolve($.ajax(...params...)).then(function(result) {
    //whatever you want to do after the request
});

如@charlietfl所指出的,由jqXHR返回对象$.ajax()实现Promise接口。因此,实际上没有必要将其包装在中Promise,可以直接使用:

$.ajax(...params...).then(function(result) {
    //whatever you want to do after the request
});

或者,您可以在一个函数完成时触发自定义事件,然后将其绑定到文档:

function a() {
    // first function code here
    $(document).trigger('function_a_complete');
}

function b() {
    // second function code here
}

$(document).bind('function_a_complete', b);

使用此方法,函数“ b”只能在函数“ a”之后执行,因为仅当函数a完成执行时才存在触发器。

你可以这样

$.when(funtion1()).then(function(){
    funtion2();
})

这取决于function1在做什么。

如果function1在执行一些简单的同步javascript,例如更新div值或其他操作,则function2将在function1完成后触发。

如果function1正在进行异步调用(例如AJAX调用),则需要创建“回调”方法(大多数ajax API都具有回调函数参数)。然后在回调中调用function2。例如:

function1()
{
  new AjaxCall(ajaxOptions, MyCallback);
}

function MyCallback(result)
{
  function2(result);
}

如果必须在方法2、3、4之后执行方法1,则以下代码段可以是使用JavaScript中的Deferred对象的解决方案。

function method1(){
  var dfd = new $.Deferred();
     setTimeout(function(){
     console.log("Inside Method - 1"); 
     method2(dfd);	 
    }, 5000);
  return dfd.promise();
}

function method2(dfd){
  setTimeout(function(){
   console.log("Inside Method - 2"); 
   method3(dfd);	
  }, 3000);
}

function method3(dfd){
  setTimeout(function(){
   console.log("Inside Method - 3"); 	
   dfd.resolve();
  }, 3000);
}

function method4(){   
   console.log("Inside Method - 4"); 	
}

var call = method1();

$.when(call).then(function(cb){
  method4();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果function1是某个同步功能,您希望将其转换为一个异步功能,因为它需要一些时间才能完成,并且您无法控制它来添加回调:

function function1 (someVariable) {
    var date = Date.now ();
    while (Date.now () - date < 2000);      // function1 takes some time to complete
    console.log (someVariable);
}
function function2 (someVariable) {
    console.log (someVariable);
}
function onClick () {
    window.setTimeout (() => { function1 ("This is function1"); }, 0);
    window.setTimeout (() => { function2 ("This is function2"); }, 0);
    console.log ("Click handled");  // To show that the function will return before both functions are executed
}
onClick ();

输出将是:

Click handled

...并在2秒后:

This is function 1
This is function 2

之所以可行,是因为调用window.setTimeout()会将任务添加到JS runtine任务循环中,这就是异步调用的原因,并且因为JS运行时的“运行完成”的基本原理确保onClick()在结束之前永远不会中断。

请注意,这很有趣,可能使代码难以理解...

本文地址:http://javascript.askforanswer.com/shangyigegongnengwanchenghoudiaoyongyigegongneng.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!