1

在 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”的警报。

4

6 回答 6

5

如果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);
};
于 2012-06-30T08:50:40.230 回答
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，因此函数调用可以链接在一起。

于 2012-06-30T17:11:54.057 回答
1

如果事件是同步的，则有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，执行顺序仍然是function1then function2。

另一种调用方式是：

window.onload = function() {
  var key = [];
  document.getElementById("test1").addEventListener('click', keyedSequence(key, function1), false);
  document.getElementById("test2").addEventListener('click', keyedSequence(key, function2), false);
}
于 2012-09-11T03:39:35.793 回答
0

如果没有以明确的方式编写这些事件处理程序，则无法判断函数设置的每个事件处理程序何时被触发。

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

delay(2000,function(){
    alert('Function 1');
    delay(1000,function(){alert('Function 2');});
});
于 2012-06-30T08:52:11.697 回答
0

您可以像这样使用自确定函数（或“延迟函数确定”）：

var selfDetermine = function() {
    alert("Hi, this is the first time we meet.");
    selfDetermine = function() {
        alert("Hello again!");
    }
}
于 2012-06-30T16:14:04.947 回答
0

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

像这样的东西应该适合你：

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

关于 when() 的 jQuery 文档

于 2014-11-21T19:47:04.970 回答