gakkie プログラミング 備忘録

tech::expert(現tech camp) 45期

jquery コールバック関数練習

f:id:shuzou555:20190923144616p:plain

今回のテーマ:コールバック関数

  • コールバックの練習
  • Q.そもそもコールバックとは?
  • A.何らかの処理が終わった後に何らかの処理をすること。

具体的な方法

まずはコールバック関数無しで。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
</head>
<body>
    <p>jQueryの練習</p>
    <div id="box" style="width:100px;height:100px;background:blue;"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            $('#box').fadeOut(800);
        });
    </script>
</body>
</html>

単純に四角形が消えるだけ。
この後にアラートを表示したい。そこでコールバック関数が使える。

さあ、やってみよう!!

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
</head>
<body>
    <p>jQueryの練習</p>
    <div id="box" style="width:100px;height:100px;background:blue;"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            $('#box').fadeOut(800, function() {
                alert("gone!");
            });
        });
    </script>
</body>
</html>
  • 第2引数にfunctionをとる。
  • その中で「alert("gone!");」とすると、
    この要素が fadeOut で消えたときこの処理を実行してくれる。