Question

在javascript中，我们以准并行方式触发函数

window.onload=function(){
document.getElementById("test").addEventListener('click', function1(), false);
//consider it takes 3 seconds to be completed
document.getElementById("test").addEventListener('click', function2(), false);
}

function2()完全执行后我们如何解雇function1()？

在jQuery中，我们可以将一系列函数链接为（例如）：

$(this).fadeIn(3000).fadeOut(2000);

如何在纯JavaScript中进行此功能更改？

编辑：在回复否定评论和投票时，我提供了以下示例：

function delay(time, func){
setTimeout(func,time);
}

delay(2000,function(){alert('Function 1');});
delay(1000,function(){alert('Function 2');});

在此示例中，您将首先看到“功能2”的提醒。

Answer 1

如果function1是异步的，你将不得不修改它，以便调用者可以传递一个完成后将执行的回调，例如jQuery的ajax方法提供回调，例如成功，错误，......：

window.onload = function() {
    function1(function() {
        // the callback is executed once function1 completes so
        // we can now invoke function 2
        function2();
    });
};

顺便说一句，可以用更简洁的方式写成：

window.onload = function() {
    function1(function2);
};

Answer 2

我对代码进行了一些修改，因此它使用了JSON和更多类似JQuery的...

function $c(func){
    var obj;
    if(func=='alert'){
        obj={
            'queue':[],
            'timeout':null,
            'alert':function(timeout,prompt){
                obj.queue.push({timeout:timeout,prompt:prompt});
                if(obj.timeout==null){
                    obj.timeout=setTimeout(obj.do_alert,timeout);
                }
                return obj;
            },
            'do_alert':function(){
                var current=obj.queue.shift();
                alert(current.prompt);
                if(obj.queue.length>0){
                    obj.timeout=setTimeout(obj.do_alert,obj.queue[0].timeout);
                }else{
                    obj.timeout=null;
                }
            },
        };
    }else if(func=='write'){
        obj={
            'queue':[],
            'timeout':null,
            'write':function(timeout,text){
                obj.queue.push({timeout:timeout,text:text});
                if(obj.timeout==null){
                    obj.timeout=setTimeout(obj.do_write,timeout);
                }
                return obj;
            },
            'do_write':function(){
                var current=obj.queue.shift();
                var node=document.createTextNode(current.text);
                document.body.appendChild(node);
                if(obj.queue.length>0){
                    obj.timeout=setTimeout(obj.do_write,obj.queue[0].timeout);
                }else{
                    obj.timeout=null;
                }
            },
        };
    }
    return obj;
}

$c('alert').alert(1000,"This is an alert...").alert(3000,"...sequence.");
$c('write').write(1500,"Writing with...").write(1000," delay.").write(1000," Yay!");

<强>解释
这将创建一个返回对象$c的函数obj。 obj取决于传递的参数，因此它包含不同的使用方法。分离的调用形成不同的队列，因此可以按照样式，顺序或并行完成作业。对函数的调用也会返回obj，因此函数调用可以链接在一起。

Answer 3

如果事件是同步的，则有Continuum函数按顺序运行函数：

function keyedSequence(key, fn) {
  fn = fn || this;
  key.push({fn:fn});

  return function() {
    for(var i=0, n, full=1; i<key.length; i++) {
      n = key[i];
      if(n.fn == fn) {
        if(!n.called) n.called = 1, n.args = key.slice.call(arguments);
        if(!full) break
      }
      if(!n.called) full = 0
    }

    if(full) for(i=0; i<key.length; i++)
      n = key[i], key[i] = {fn:n.fn}, n.fn.apply(n, n.args);
  }
}
Function.prototype.seq = keyedSequence;

您提供一个空数组作为键。用相同键键入的功能将组合在一起。

window.onload = function() {
  var key = [];
  document.getElementById("test1").addEventListener('click', function1.seq(key), false);
  document.getElementById("test2").addEventListener('click', function2.seq(key), false);
}

点击test2，然后点击test1，执行顺序仍为function1，然后function2。

另一种称呼方式是：

window.onload = function() {
  var key = [];
  document.getElementById("test1").addEventListener('click', keyedSequence(key, function1), false);
  document.getElementById("test2").addEventListener('click', keyedSequence(key, function2), false);
}

Answer 4

没有办法告诉函数设置的每个事件处理程序何时被触发，而没有明确地以这种方式编写事件处理程序。

如果功能1说“单击X时执行某些操作”或“20秒后执行某些操作”或“收到HTTP响应时执行某些操作”，并且您希望功能2在发生任何一个之后运行，那么你需要在“某事”级别设置它，而不是“调用函数1”级别。

delay(2000,function(){
    alert('Function 1');
    delay(1000,function(){alert('Function 2');});
});

Answer 5

您可以使用这样的自定义功能（或“延迟功能确定”）：

var selfDetermine = function() {
    alert("Hi, this is the first time we meet.");
    selfDetermine = function() {
        alert("Hello again!");
    }
}

Answer 6

您可以利用jQuery.when()推迟一个函数的执行，直到另一个函数完成它的执行。

这样的事情对你有用：

$.when(delay(2000,function(){alert('Function 1');})).done(delay(1000,function(){alert('Function 2');}));

jQuery documentation on when()

Javascript中的函数链

6 个答案: