一定時間ごとに処理を行う方法

一定時間ごとに処理を一回だけ行いたい。
そのため、ループさせる関数(下記コード中のdraw)の中に、フレーム数をカウントする関数frame_2を宣言した。
フレームレートは、30fpsとし、フレームの長さをframe length_2=60.0とする。
if文の条件として、このフレームの長さごとに処理を行わせるために、frame_2===0として処理を書く。
しかしながら、処理文中のcounterという変数を見ていただくとわかるように、if文中の処理が二回行われてしまう。
この処理を一回にする方法を求めたい。どなたかご助言いただけると幸いである。

javascript
1let canvas = document.getElementById("myCanvas");
2let context = canvas.getContext("2d");
3
4/*
5function init(){
6
7    //context.fillRect(0,0,800,800);
8
9    for(let i=1; i<8; i++){
10        for(let j=1; j<8; j++){
11            context.save();
12            context.beginPath();
13            context.fillStyle = "yellow";
14            context.arc(80*i,80*j,40,0,Math.PI*2);
15            context.closePath();
16            context.fill();
17            context.restore();
18        }
19    }
20
21    for(let i=1; i<8; i++){
22        for(let j=1; j<8; j++){
23            context.save();
24            context.beginPath();
25            context.fillStyle = "black";
26            context.arc(80*i,80*j,10,0,Math.PI*2);
27            context.closePath();
28            context.fill();
29            context.restore();
30        }
31    }
32
33
34}
35*/
36
37
38class CrackDisk {
39    constructor(x,y,rad,r){
40        this.x = x;
41        this.y = y;
42        this.rad = rad;
43        this.r = r;
44    }
45    update(){
46        this.rad = Math.random()*Math.PI*2/2
47    }
48
49    render(){
50
51        
52        if(this.rad > 0){
53
54            let vec = {x:Math.cos(this.rad/2),y:Math.sin(this.rad/2)};
55            let R = -10*0;
56
57            context.save();
58            context.beginPath();
59            context.fillStyle = "yellow";
60            context.arc(this.x +R*vec.x,this.y +1*R*vec.y,this.r,0,this.rad);
61            context.lineTo(this.x +R*vec.x,this.y +1*R*vec.y);
62            context.lineTo(this.x +R*vec.x + this.r,this.y +1*R*vec.y);
63            context.closePath();
64            context.fill();
65            context.restore();
66
67        }
68        
69        /*
70        context.save();
71        context.beginPath();
72        context.fillStyle = "white";
73        context.arc(this.x,this.y,20,0,Math.PI*2);
74        context.closePath();
75        context.fill();
76        context.restore();
77        */
78       
79        context.save();
80        context.beginPath();
81        context.fillStyle = "black";
82        context.arc(this.x,this.y,10,0,Math.PI*2);
83        context.closePath();
84        context.fill();
85        context.restore();
86        
87
88        context.save();
89        context.beginPath();
90        context.fillStyle = "blue";
91        context.arc(this.x,this.y,this.r,this.rad,Math.PI*2);
92        context.lineTo(this.x,this.y);
93        context.lineTo(this.x + this.r*Math.cos(this.rad),this.y + this.r*Math.sin(this.rad));
94        context.closePath();
95        context.fill();
96        context.restore();
97        
98    }
99
100}
101
102let objects = [];
103
104
105
106for(let i=1; i<8; i++){
107    for(let j=1; j<8; j++){
108        objects.push(new CrackDisk(80*i,80*j,0,40));
109    }
110}
111objects.forEach((obj) => obj.render());
112
113/*
114document.addEventListener("click",click,false);
115
116function click(){
117
118context.fillRect(0,0,800,800);
119
120objects.forEach((obj) => obj.update());
121objects.forEach((obj) => obj.render());
122
123}
124*/
125
126const start = new Date();
127const startTime = start.getTime();
128
129let counter = 0
130
131function draw(){
132
133    window.requestAnimationFrame(draw);
134
135    let now = new Date();
136    let time = now.getTime() - startTime;
137
138    let fps = 30.0;
139    let framelength = 60.0;
140    let framelength_2 = 60.0;
141
142    let frame = Math.floor( (time / (1000/fps)) % framelength );
143    //console.log(frame);
144
145    let frame_2 = Math.floor( (time / (1000/fps)) % framelength_2 );
146    //console.log(frame_2);
147
148    if(frame_2 === 0){
149        
150        context.fillRect(0,0,800,800);
151        objects.forEach((obj) => obj.update());
152        objects.forEach((obj) => obj.render());
153        
154        counter += 1;
155        console.log(counter);
156    }
157
158
159}
160
161window.requestAnimationFrame(draw);

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

回答2件

ベストアンサー

if文中の処理が二回行われてしまう。この処理を一回にする方法を求めたい。

if文中の処理が２回行われるのは、フレーム更新直後にdrawが呼ばれたときに、更新間隔が短すぎて
timeが変わっていないのが原因かと思います。

下記のように更新直後かどうかを表すフラグflushedを使って
更新直後の場合は更新しないようにしてみてはどうでしょうか。

js
1let counter = 0
2let flushed = false;  // 追加
3
4function draw(){
5    window.requestAnimationFrame(draw);
6
7    let now = new Date();
8    let time = now.getTime() - startTime;
9
10    let fps = 30.0;
11    let framelength = 60.0;
12    let framelength_2 = 60.0;
13
14    let frame = Math.floor( (time / (1000/fps)) % framelength );
15    let frame_2 = Math.floor( (time / (1000/fps)) % framelength_2 );
16    console.log("frame_2:"+frame_2);
17
18    if(frame_2 === 0){
19        if (!flushed){
20            context.fillRect(0,0,800,800);
21            objects.forEach((obj) => obj.update());
22            objects.forEach((obj) => obj.render());
23            counter += 1;
24            console.log("counteer:"+counter);
25            flushed = true;  
26        } 
27    } else {
28        flushed = false;
29    }
30}