画面表示後にjavascriptを動かす方法について

javascript初心者です。

Chart.jsのグラフのアニメーションがjavascriptが読み込まれた際に動いているため
指定の位置までスクロールするとフェードインされるスクロールアニメーションの後に、表示される時には既にグラフのアニメーションが終わってしまいます。
そこで画面に表示したタイミングでアニメーションが開始されるinview.jsを使用しましたがうまくいかず、設置後は表示されなくなりました。

スクロールアニメーションが終わった後にグラフのアニメーションが始まる方法がありましたら、ご指導宜しくお願い致します。

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
2<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
3<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
4<script src="js/jquery.inview.min.js" type="text/javascript"></script>
5
6      <div class="fadein">
7        <canvas id="doughnut07"></canvas>
8      </div>
9
10<section>
11/*▼▼▼スクロール効果▼▼▼*/
12$(function(){
13  $(window).scroll(function (){
14    $('.fadein').each(function(){
15      var elemPos = $(this).offset().top;
16      var scroll = $(window).scrollTop();
17      var windowHeight = $(window).height();
18      if (scroll > elemPos - windowHeight + 400){
19          $(this).addClass('scrollin');
20      }
21    });
22  });
23});
24
25/*▼▼▼グラフ▼▼▼*/
26$(function() {
27  $('.doughnut07').on('inview', function(event, isInView) {
28var data = [
29　　{
30　　　value: 53,/*男性*/
31　　　color:"#feb0c1"
32　　},
33　　{
34　　　value: 46,/*女性*/
35　　　color: "#f8f8f8",
36　　}
37];
38
39var myDoughnut = new Chart(document.getElementById("doughnut07").
40getContext("2d")).Doughnut(data, {
41  tooltipTemplate: "<%=value%> ％",
42  animation:true,
43  enabled:false,
44});
45});
46});
47
48</section>
49

css
1
2.fadein {
3  opacity : 0;
4  transform : translate(0, 50px);
5  transition : all 1000ms;
6}
7
8/* 画面内に入った状態 */
9.fadein.scrollin {
10  opacity : 1;
11  transform : translate(0, 0);
12}
13

行動規範の内容に同意します

回答1件

面倒なのでHTM、CSS、JavaScriptを一緒にしてしまいました。
一応、スクロールアニメーションのフェードインとチャートアニメーションの両立に成功しました。

ここのキモはeventと一緒にもらってるisInViewでスクロールアニメーションをやり
チャートアニメーションを行うってところですかね。

あとはCSSでスクロールアニメーションの時間などを調節して気に入った状態にしてみてください。

ガーベージコレクションを強制実行させようと格闘しましたが上手くいかなかったので、
一度画面外に出てフェードアウトしたときにチャートを破棄しているのですが、再度画面に
入ってきたときに、前のチャートが残ってしまってます。その状態から再描画されます。
申し訳ありません。

HTML
1<!DOCTYPE html> 
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
7  <title>画面表示後にjavascriptを動かす</title>
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
9  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
10  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
11  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js" type="text/javascript"></script>
12</head>
13<body>
14    <article>
15        <style>
16            /* scrollできるように親コンテナのdivに大き目のheightを指定*/
17            .div_height {
18                position: relative;
19                height: 3000px;
20            }
21
22            /*scroll後のanimationを見たいので絶対値指定で下に下げておく*/
23            /*絶対値指定するためには、親要素のpositionをrelativeにしておくこと*/
24            #doughnut07 {
25                position: absolute;
26                top: 1500px;
27                background-color: aquamarine;
28                border: black solid 3px;
29            }
30
31            .fadein {
32                opacity : 0;
33                transform : translate(0, 50px);
34                transition : all 8000ms;
35            }
36
37            /* 画面内に入った状態 */
38            .fadein.scrollin {
39                opacity : 1;
40                transform : translate(0, 0);
41            }
42        </style>
43
44        <section>
45            <div class="div_height">
46                <canvas id="doughnut07" class="fadein"></canvas>
47            </div>
48
49            <script>
50
51                var drowing = false;
52
53                $('#doughnut07').on('inview', function(event, isInView){ /* doughnut07はidなので、#で始めなければならない */
54                /*▼▼▼スクロール効果▼▼▼*/
55                if (isInView){ /*画面内に入ったか判定*/
56                        $('#doughnut07').addClass('scrollin');
57                    } else {
58                        $('#doughnut07').removeClass('scrollin');
59                    }
60
61                    setTimeout(drawChart, 8000, isInView, drowing); /* CSSのスクロールアニメーション時間と合わせる*/
62                });
63
64                function drawChart(isInView, drowing) {
65
66                /*▼▼▼グラフ▼▼▼*/
67                    var data = [
68                        {
69                            value: 53,/*男性*/
70                            color:"#feb0c1"
71                        },
72                        {
73                            value: 46,/*女性*/
74                            color: "#f8f8f8",
75                        }
76                    ];
77
78                    if (isInView && !drowing) {
79                        window.myDoughnut = new Chart(document.getElementById("doughnut07").
80                        getContext("2d")).Doughnut(data, {
81                            tooltipTemplate: "<%=value%> ％",
82                            animation:true,
83                            enabled:false,
84                        });
85                    }
86
87                    if (isInView) {
88                        drowing = true;
89                    } else {
90                        if (myDoughnut) {
91                            myDoughnut.destroy();
92
93                            /*
94                            // 強制ガーベージコレクション実行
95                            var userAgent = window.navigator.userAgent.toLowerCase();
96
97                            if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
98                                //IE向けの記述
99                                window.CollectGarbage();
100                            } else if(userAgent.indexOf('edge') != -1) {
101                                //旧Edge向けの記述
102                            } else if(userAgent.indexOf('chrome') != -1) {
103                                //Google Chrome向けの記述
104                                window.gc();
105                            } else if(userAgent.indexOf('safari') != -1) {
106                                 //Safari向けの記述
107                            } else if(userAgent.indexOf('firefox') != -1) {
108                                //FireFox向けの記述
109                            } else {
110                                //その他のブラウザ向けの記述
111                            }
112                            */
113                            
114                            drowing = false;
115                        }
116                    }
117                }
118            </script>
119        </section>
120    </article>
121</body>
122</html>