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!");

説明:これにより、 object を返す
関数が作成されます。渡された引数に依存するため、使用するさまざまなメソッドが含まれています。分離されたコールは異なるキューを形成するため、ジョブは両方のスタイル、順番または並列で実行できます。関数への呼び出しも返されるため、関数呼び出しを連鎖させることができます。$cobjobjobj

于 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実行順序はそのままです。function1function2

それを呼び出す別の方法は次のとおりです。

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

jQuery.when()別の関数の実行が完了するまで、ある関数の実行を延期するために利用できます。

このようなものがうまくいくはずです：

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

when() に関する jQuery ドキュメント

于 2014-11-21T19:47:04.970 に答える
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

関数によって設定されたすべてのイベント ハンドラーがいつ起動されたかを知る方法はありません。これらのイベント ハンドラーは、明示的にそうするように記述されていなければなりません。

機能 1 が「X がクリックされたときに何かを実行する」または「20 秒後に何かを実行する」または「HTTP 応答が受信されたときに何かを実行する」と言っており、これらのいずれかが発生した後に機能 2 を実行する場合は、 「呼び出し関数1」レベルではなく、「何か」レベルで設定します。

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