可視領域でカウントダウンアニメーション。繰り返されてしまう・数字にカンマを入れたい

いつもお世話になっております。
jsで可視領域に入った1秒後に数字をカウントダウンさせるアニメーションを実装しています。
以下の2点がわからず困っております。

1）正規表現でカンマを入れたい

replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');

こちらを入れれば良さそうなのですが、どのように入れればいいかわからず困っております。

2）カウントダウンのアニメーションが不安定。
発火中に途中でスクロールし再び戻ると、アニメーションが繰り返されてしまいます。
可視領域で発火のjsはjQuery-appearを使用しております。
https://bl6.jp/web/javascript/jquery-appear/

■コード

HTML
1<div id="price1">
2<span id="aaa">300000</span> 円
3</div>
4<div id="price2">
5<span>200000</span> 円
6</div>
7<div id="price3">
8<span>100000</span> 円
9</div>
10<div id="price4">
11<span>90000</span> 円
12</div>

JS
1	$('#price1,#price2,#price3,#price4').appear(function () {
2
3setTimeout(function () {
4$({count: 300000}).animate({count: 150000}, {
5	duration: 800,
6	easing: 'linear',
7	progress: function() { 
8	    $('#aaa').text(Math.ceil(this.count)); 
9	}
10});$({count: 200000}).animate({count: 100000}, {
11	duration: 800,
12	easing: 'linear',
13	progress: function() { 
14	    $('#price2 span').text(Math.ceil(this.count)); 
15	}
16});$({count: 100000}).animate({count: 50000}, {
17	duration: 800,
18	easing: 'linear',
19	progress: function() { 
20	    $('#price3 span').text(Math.ceil(this.count)); 
21	}
22});$({count: 90000}).animate({count: 1000}, {
23	duration: 800,
24	easing: 'linear',
25	progress: function() { 
26	    $('#price4 span').text(Math.ceil(this.count)); 
27	}
28});
29      }, 1000);
30});

codepenにもアップしております。
https://codepen.io/chibiyuko_0124/pen/mdJQZYK

ご教示いただけますと幸いです。

よろしくお願いいたします。

kei344

2020/03/27 07:28

コードは外部サービスだけでなく、質問文にコードブロックでお書きください。

chibiyuko_0124

2020/03/27 07:41

kei344様コードブロックに記述しました。

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

回答2件

自己解決

カウントダウンのjQueryをjquery-numeratorを使ったら解決しました。

HTML
1<p class="my-value">8000</p>

javascript
1$('.my-value').appear(function () {
2  jQuery( function($) {
3    setTimeout(function () {
4      $('.my-value').numerator( {
5        easing: 'linear', // アニメーションの動き
6        duration: 1000, // アニメーションの時間
7        fromValue: 10000, //アニメーション後の数値
8        toValue: 8000, // アニメーション前の数値
9        delimiter: ',', // ３桁ごとに区切る値
10        rounding: 0 // 小数点以下の桁数
11      });
12    }, 1000);
13  });
14});

投稿2020/03/27 16:31

chibiyuko_0124

総合スコア18

1）正規表現でカンマを入れたい

ユーザ関数でよければ、コードスニペットを貼り付けておきます

javascript
1const comma = (n) => {
2	let r='', m;
3	if( isFinite(n) && (m = (''+n).match(/^(\d+)(\x2e\d+)?$/)) ) {
4		let [t,d] = m.slice(1);
5		for( ; t!=(r=t.replace(/^([+-]?\d+)(\d\d\d)/, "$1,$2") ); ) {
6			t=r;
7		} 
8		return d ? r + d : r;
9	}
10}