JavaScript が正常に実行されない

前提・実現したいこと

CSSアニメーションを5秒後に消したい。
JavaScriptで、setTimeoutとdivのclass削除で行なっている。

発生している問題・エラーメッセージ

アニメーションが削除されない

該当のソースコード

hrml
1
2<HTML>
3<head>
4</head>
5<body>
6<style>
7
8/**
9 * Document defaults (don't copy these).
10 */
11body {
12  text-align: center;
13  background-color: #eee;
14}
15
16* {
17  -webkit-box-sizing: border-box;
18     -moz-box-sizing: border-box;
19          box-sizing: border-box;
20}
21
22
23/* The loader container */
24.loader {
25  position: absolute;
26  top: 50%;
27  left: 50%;
28  
29  width: 200px;
30  height: 200px;
31  
32  margin-top: -100px;
33  margin-left: -100px;
34}
35
36
37/* The dot */
38.loader > .dot {
39  position: absolute;
40  top: 50%;
41  left: 50%;
42  z-index: 10;
43
44  width: 160px;
45  height: 100px;
46  
47  margin-top: -50px;
48  margin-left: -80px;
49
50  border-radius: 5px;
51
52  background-color: #1e3f57;
53
54  transform-type: preserve-3d;
55
56  animation: dot1 3s cubic-bezier(.55,.3,.24,.99) infinite;
57}
58
59.loader > .dot:nth-child(2) {
60  z-index: 11;
61  
62  width: 150px;
63  height: 90px;
64  
65  margin-top: -45px;
66  margin-left: -75px;
67  
68  border-radius: 3px;
69  
70  background-color: #3c617d;
71  
72  animation-name: dot2;
73}
74
75.loader > .dot:nth-child(3) {
76  z-index: 12;
77  
78  width: 40px;
79  height: 20px;
80  
81  margin-top: 50px;
82  margin-left: -20px;
83  
84  border-radius: 0 0 5px 5px;
85  
86  background-color: #6bb2cd;
87  
88  animation-name: dot3;
89}
90
91@keyframes dot1 {
92  3%, 97% {
93    width: 160px;
94    height: 100px;
95
96    margin-top: -50px;
97    margin-left: -80px;
98  }
99  30%, 36% {
100    width: 80px;
101    height: 120px;
102
103    margin-top: -60px;
104    margin-left: -40px;
105  }
106  63%, 69% {
107    width: 40px;
108    height: 80px;
109
110    margin-top: -40px;
111    margin-left: -20px;
112  }
113}
114
115@keyframes dot2 {
116  3%, 97% {
117    width: 150px;
118    height: 90px;
119
120    margin-top: -45px;
121    margin-left: -75px;
122  }
123  30%, 36% {
124    width: 70px;
125    height: 96px;
126
127    margin-top: -48px;
128    margin-left: -35px;
129  }
130  63%, 69% {
131    width: 32px;
132    height: 60px;
133
134    margin-top: -30px;
135    margin-left: -16px;
136  }
137}
138
139@keyframes dot3 {
140  3%, 97% {
141    width: 40px;
142    height: 20px;
143
144    margin-top: 50px;
145    margin-left: -20px;
146  }
147  30%, 36% {
148    width: 8px;
149    height: 8px;
150
151    margin-top: 49px;
152    margin-left: -5px;
153    
154    border-radius: 8px;
155  }
156  63%, 69% {
157    width: 16px;
158    height: 4px;
159
160    margin-top: -37px;
161    margin-left: -8px;
162    
163    border-radius: 10px;
164  }
165}
166</style>
167
168<div id="dv1" class="loader">
169  <div class="dot"></div>
170  <div class="dot"></div>
171  <div class="dot"></div>
172</div>
173<script>
174
175
176function firstscript() {
177
178function sleep(waitSec, callbackFunc) {
179 
180  var spanedSec = 0;
181 
182  var waitFunc = function () {
183 
184      spanedSec++;
185 
186      if (spanedSec >= waitSec) {
187          if (callbackFunc) callbackFunc();
188          return;
189      }
190 
191      clearTimeout(id);
192      id = setTimeout(waitFunc, 1000);
193  
194  };
195 
196  var id = setTimeout(waitFunc, 1000);
197 
198}
199 
200sleep(5, function() {
201
202var obj = document.getElementById("dv1");
203
204var list = obj.classList;
205
206  obj.classList.remove("loader");
207
208alert('ページの読み込みが完了したよ！');
209
210}
211 });
212// ページの読み込み完了と同時に実行されるよう指定
213window.onload = firstscript;
214
215</script>
216<h1>1234567890</h1>
217

試したこと

setTimeoutを使用しない時は、正常に削除されて、
表示されないため、setTimeoutに問題があると思われる。

m.ts10806

2020/05/13 03:36

HTMLもCSSもJavaScriptも本当に本件に全て必要でしょうか？もっと最小構成で試して問題切り分けを行ってください。でないと本当にsleep()が関係するのか断定することは出来ません

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

回答3件

javascriptに標準でsleepは実装されていないと思います
setTimeoutやPromiseなどで処理するようにしてください

投稿2020/05/13 03:37

編集2020/05/13 03:39

yambejp

総合スコア116835

JavaScriptで、sleepとdivのclass削除で行なっている。

ブラウザ上でこのようなビジーウェイトをやってはいけません。setTimeoutで処理してください。

投稿2020/05/13 03:37

maisumakun

総合スコア146063

自己解決


<script>

function sleep(waitSec, callbackFunc) {
 
  var spanedSec = 0;
 
  var waitFunc = function () {
 
      spanedSec++;
 
      if (spanedSec >= waitSec) {
          if (callbackFunc) callbackFunc();
          return;
      }
 
      clearTimeout(id);
      id = setTimeout(waitFunc, 1000);
  
  };
 
  var id = setTimeout(waitFunc, 1000);
 
}
 
sleep(5, function() {
 var obj = document.getElementById("dv1");

var list = obj.classList;

  obj.classList.remove("loader");
});

</script>

これで解決しました

投稿2020/05/13 03:54

daichi-onoue

総合スコア53