コールバック関数は実行されません

Question

私は2つの関数を持っています。最初の関数が終了してから2番目の関数を実行したいと思います。

これはケースです。）

$('.link').on('click', function(e){ 
    e.preventDefault(); 

    function myLoopOne() {  
    console.log('first function executed'); 
    } 

    function myLoop() {   
    console.log('second function executed'); 
    } 

    myLoopOne(function(){ 
    myLoop(); 
    }); 

}); 

は残念ながら、唯一の最初の関数が実行され、コールバック関数myLoop（呼び出されません。

私が間違っていることを教えてもらえますか？

Answer 1

あなたはmyLoopOne()にあなたが提供する機能のリファレンスを使用してこのように、それを呼び出す必要があります。このパターンは唯一の非同期コードに適用されることに

$('.link').on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    function myLoopOne(callback) { // < receive the function reference 
 
    console.log('first function executed'); 
 
    callback && callback(); // < call the referenced function, if one was provided 
 
    } 
 

 
    function myLoop() { 
 
    console.log('second function executed'); 
 
    } 
 

 
    myLoopOne(function() { 
 
    myLoop(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="link">Click me</button>

注意。同期的に作業している場合は冗長です。

Answer 2

これを試してください。別の関数を呼び出す関数の中でパラメータとメソッド呼び出しとしてコールバックを追加する必要があります。コールバックだけでなく、パラメータとメソッド呼び出しとして任意の単語を渡すことができます。

$('.link').on('click', function(e) { 
 
    e.preventDefault(); 
 
    myLoopOne(myLoop); 
 
}); 
 

 
// need to add callback as a parameter and method call inside the function which call another function 
 
function myLoopOne(callback) { 
 
    console.log('first function executed'); 
 
    callback(); 
 
} 
 

 
function myLoop() { 
 
    console.log('second function executed'); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="link">Click me</button>