0

クリックイベントで呼び出した関数の処理が全て終わってから、クリックイベント内の関数呼び出し後の処理をさせるにはどうしたらよいでしょうか。


現状

closeボタンを押したら、outMotionの処理が終わってからviewAreaという要素を非表示にする、という処理を行いたく下記のコードを書いています。

$("#close").on("click", () => {
    outMotion();
    $("#viewArea").hide(); // outMotion関数の処理が終わってから実行したい
});

const outMotion = () => {
    // モーション処理
};

問題点

しかし、上記のコードだとモーションが終わるのを待たずして、viewArea要素が非表示になります。
このような処理になる理由は、「JavaScriptは非同期処理だから」というのは理解しています。


調べたこと

同期処理をさせるにはコールバックするとよい、ということが調べて分かりました。
そこで、コールバックについて調べました。

下記のページ
https://www.sejuku.net/blog/52314#Promise

で、コールバックの使用例を見つけたのですが、例のコードの意味が私では理解できず、自身のコードに置き換えることができませんでした。
使用例のコードのキャプチャを載せます。

画像の説明をここに入力

上図のコードで私が理解できなかったポイントは、getData関数内で呼び出している関数名の()が無い状態を、getData関数の引数に記述している点です。
「値や別のスコープで生成や使用されオブジェクトを受け取るもの」というのが、私の現状の引数の認識です。

この認識で、引数を使用した処理例を下記に書きます。

const a = () => {
    const aObj = 1;
    b(aObj);
  // aObjをb関数で使用するため、b関数を呼び出すと同時に引数としてaObjを渡す。
};

cosnt b = aObj => { // 引数aObjを受け取る。
   console.log(aObj); // 受け取ったaObjを使用する。
}

私がいま作っているプログラムで上記のような書き方を部分的に使用しておりまして、希望通りの挙動をしています。
なので私の引数の認識は「引数の理解を完全にできていないが、間違っているとは言えない」ぐらいのものかと思われます。
ただ、例に示めされているコードで動くわけなので、私の理解が足りない、ならびに間違っていることも認識しております。

以上の私の認識および認識レベルですと、「引数に関数内で呼び出す関数名を書く」意味が分かりませんでした。

くどいようですが先に述べた通りの私の認識ですと、上図の下のgetData関数を呼び出すコードも下記の点で理解ができませんでした。

getData関数を呼び出す際に、引数として関数を渡している
funciton(data){ getYear(data); }dataはどこから来たのか
funciton(data)getYearを呼び出しているが、getYear関数はどこから来たのか(またはどこで定義されているのか)


長々と書きましたが、

本題は、現状の項にあるコードで起きている問題を、冒頭文にある処理にするにはどうしたらよいでしょうか、です。


コード(追記)

$("#view").on("click", () => {
    $("#viewArea").show();
    inMotion();
});

$("#close").on("click", () => {
    outMotion();
    $("#viewArea").hide();
});

const inMotion = () => {
    anime({
        targets: "li",
        translateY: ["100%", "0%"]
    });
};
const outMotion = () => {
    anime({
        targets: "li",
        translateY: ["0%", "100%"]
    });
};
body {
    max-width: 500px;
    width: 100%;
    margin: auto;
    text-align: center;
}

#viewArea {
    display: none;
}

ul {
    padding-left: 0;
    list-style: none;
    display: flex;
}

li {
    margin: 0 5%
}
    <body>
        <button id="view">表示</button>
        <div id="viewArea">
            <ul>
                <li><button>a</button></li>
                <li><button>b</button></li>
                <li><button>c</button></li>
                <li><button>d</button></li>
                <li><button>e</button></li>
                <li><button id="close">close</button></li>
            </ul>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
    </body>

2
  • outMotionの中はどんなコードでしょうか。それによって対処は変わります。
    – int32_t
    Commented 2019年8月27日 22:07
  • 本文最後にコードを追加いたしました。モーションはanime.jsを使用しています。
    – Tiamante
    Commented 2019年8月27日 23:55

2 件の回答 2

1

こんな感じになるでしょうか?

const outMotion = function(callback) {
    // モーション処理
    //...
    callback();
};

$("#close").on("click", function() {
    outMotion(function() {
        $("#viewArea").hide(); // outMotion関数の処理が終わってから実行したい
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="close">Close</button>
<div id="viewArea" style="background-color: red">viewArea</div>


「調べたこと」を読む限り、関数の引数についても理解が不十分ですし、「関数そのものを渡すこと」と「関数を呼び出してその結果を使うこと」の区別が全くついていないように思います。

(上記の例では、より強く「関数そのもの」を扱っている感が出るかと思って、アロー記法を使わずに無名関数の構文を使っています。)

とりあえず、「関数そのものを渡すこと」の簡単な例を書いてみますので、よく理解できない部分があれば、コメント等でお知らせください。

//関数を定義する
function test(data) {
    alert(data);
    return "value";
}
//定義した関数を実行する
test("引数");
//定義した関数を変数に入れる
var f = test;
//変数に入っている関数を実行する
f("argument");
//変数に別の無名関数を代入する
f = function(data) {
    alert(data);
    return data + data;
}
//変数に入っている関数を実行した結果をさらに別の変数に代入
var g = f("param");
alert(g);

3
  • ご説明いただきありがとうございます。分かりやすいご説明のため、かなり理解が進んだように思います。関数名を代入=関数内の機能が代入、関数名()を代入=関数を実行し返ってきた値を代入、という理解で誤りは無いでしょうか。
    – Tiamante
    Commented 2019年8月28日 0:29
  • また、コード例をご教示いただきありがとうございます。ご教示いただきましたコードを自身のコードにまだ反映できていない且ついましばらくは試せそうにないので、取り急ぎお礼だけ申し上げます。試し次第またコメントいたします。
    – Tiamante
    Commented 2019年8月28日 0:29
  • @JAMOji さん、ご丁寧なコメントありがとうございます。 関数名を代入=関数内の機能が代入、関数名()を代入=関数を実行し返ってきた値を代入、という理解 基本的な理解としては問題無いはずです。応用編でいろいろなことが出てくるかもしれませんが、調べてもわからないことが残れば、都度ご質問いただければと思います。
    – OOPer
    Commented 2019年8月29日 10:13
0

JavaScriptのすべてが非同期というわけではなくて、この場合anime()の処理がたまたま非同期なのです。こういった非同期処理には多くの場合終了時に呼ばれるコールバックが用意されています。

https://tr.you84815.space/animejs/callback.html

outMotion()にコールバックを渡す必要がありますね。

$("#close").on("click", () => {
    outMotion(() => {
      $("#viewArea").hide();
    });
});

const outMotion = callback => {
    anime({
        targets: "li",
        translateY: ["0%", "100%"],
        complete: callback
    });
};

また、anime()はPromiseを提供しているようなので、awaitを使うこともできます。
https://tr.you84815.space/animejs/promises.html

$("#close").on("click", async () => {
    await outMotion();
    $("#viewArea").hide();
});

const outMotion = () => {
    return anime({
        targets: "li",
        translateY: ["0%", "100%"],
    }).finished;
};

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。