else
以下には絶対に入らないから、if(num<tgt){}
の処理は無駄。
描画の回数を減らす。/ 300
となると、1000分の1秒ごとに300回描画するので。
描画のインターバルを増やす。1000分の1秒だとクライアントのマシンのスペックによってもたつく。
冗長な処理を簡素化。
obClick はレガシーコードなので、削除。on('click', function(){})
に置き換え。
html
1<!DOCTYPE HTML>
2<html lang="en-US">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #count {
8 width: 200px;
9 border: 1px solid #CCC;
10 padding: .5em;
11 text-align: right;
12 }
13 </style>
14 </head>
15 <body>
16 <form action="">
17 <ul>
18 <li>
19 <label>
20 <input class="item" type="radio" name="pay_01" value="10000" />
21 10000
22 </label>
23 </li>
24 <li>
25 <label>
26 <input class="item" type="radio" name="pay_01" value="20000" />
27 20000
28 </label>
29 </li>
30 </ul>
31 <ul>
32 <li>
33 <label>
34 <input class="item" type="checkbox" name="pay_02[]" value="500" />
35 500
36 </label>
37 </li>
38 <li>
39 <label>
40 <input class="item" type="checkbox" name="pay_02[]" value="10000" />
41 10000
42 </label>
43 </li>
44 </ul>
45 </form>
46
47 <div id="count">
48 0
49 </div>
50
51 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
52 <script>
53 function loop_set(tgt) {
54
55 // 初期値
56 var num = 0;
57
58 //描画回数
59 var refreshCount = 23; // 素数の方が演出的にいいかも
60
61 //描画インターバル
62 var interval = 10;
63
64 var id = setInterval(function () {
65
66 if (num <= tgt) {
67 num += Math.floor(tgt / refreshCount);
68 } else {
69 num = tgt;
70 clearInterval(id);
71 }
72 $('#count').text(num);
73
74 }, interval);
75 }
76
77 function pay() {// Ajax通信
78 $.ajax({
79 url: 'inc/calculation.php',
80 type: 'post',
81 dataType: 'json',
82 data: $("form").serialize()
83 }).done(function (response) {
84 loop_set(response['tgt']);
85 }).fail(function () {
86 alert('通信失敗');
87 });
88 }
89
90 $('.item').on('click', function () {
91 pay();
92 });
93 </script>
94 </body>
95</html>
htmlspecialchars
を使うのは不適切。
php
1<?php
2
3function calculate(array $arr)
4{
5 $sum = 0;
6 foreach ($arr as $val) {
7 if (is_array($val)) {
8 $sum += calculate($val);
9 } else {
10 $sum += $val;
11 }
12 }
13 return $sum;
14}
15
16header('Content-type: application/json');
17$calculation = array('tgt' => calculate(filter_input_array(INPUT_POST)));
18echo json_encode($calculation);
#追記
減算方向の処理でも結構簡素化できました。
html
1<!DOCTYPE HTML>
2<html lang="en-US">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #count {
8 width: 200px;
9 border: 1px solid #CCC;
10 padding: .5em;
11 text-align: right;
12 }
13 </style>
14 </head>
15 <body>
16 <form action="">
17 <ul>
18 <li>
19 <label>
20 <input class="item" type="radio" name="pay_01" value="10000" />
21 10000
22 </label>
23 </li>
24 <li>
25 <label>
26 <input class="item" type="radio" name="pay_01" value="20000" />
27 20000
28 </label>
29 </li>
30 </ul>
31 <ul>
32 <li>
33 <label>
34 <input class="item" type="checkbox" name="pay_02[]" value="500" />
35 500
36 </label>
37 </li>
38 <li>
39 <label>
40 <input class="item" type="checkbox" name="pay_02[]" value="10000" />
41 10000
42 </label>
43 </li>
44 </ul>
45 </form>
46
47 <div id="count">
48 0
49 </div>
50
51 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
52 <script>
53
54 // 初期値
55 var num = 0;
56
57 function loop_set(tgt) {
58
59 //描画回数
60 var refreshCount = 37;
61
62 //描画インターバル
63 var interval = 10;
64
65 // 増減
66 var diff = tgt - $('#count').text();
67
68 var id = setInterval(function () {
69
70 if ((diff > 0 && num <= tgt) || (diff < 0 && num > tgt)) {
71 num += Math.floor(diff / refreshCount);
72 } else {
73 num = tgt;
74 clearInterval(id);
75 }
76 $('#count').text(num);
77
78 }, interval);
79 }
80
81 function pay() {// Ajax通信
82 $.ajax({
83 url: 'inc/calculation.php',
84 type: 'post',
85 dataType: 'json',
86 data: $("form").serialize()
87 }).done(function (response) {
88 loop_set(response['tgt']);
89 }).fail(function () {
90 alert('通信失敗');
91 });
92 }
93
94 $('.item').on('click', function () {
95 pay();
96 });
97 </script>
98 </body>
99</html>
#追記
html
1<!DOCTYPE HTML>
2<html lang="en-US">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #count {
8 width: 200px;
9 border: 1px solid #CCC;
10 padding: .5em;
11 text-align: right;
12 }
13 </style>
14 </head>
15 <body>
16 <form action="">
17 <ul>
18 <li>
19 <label>
20 <input class="item" type="radio" name="pay_01" value="10000" />
21 10000
22 </label>
23 </li>
24 <li>
25 <label>
26 <input class="item" type="radio" name="pay_01" value="20000" />
27 20000
28 </label>
29 </li>
30 </ul>
31 <ul>
32 <li>
33 <label>
34 <input class="item" type="checkbox" name="pay_02[]" value="500" />
35 500
36 </label>
37 </li>
38 <li>
39 <label>
40 <input class="item" type="checkbox" name="pay_02[]" value="10000" />
41 10000
42 </label>
43 </li>
44 </ul>
45 </form>
46
47 <div id="count" data-value="0">
48 0
49 </div>
50
51 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
52 <script>
53 function number_format(num) {
54 return num.toLocaleString();
55 }
56
57 function loop_set(tgt) {
58
59 //描画回数
60 var refreshCount = 37;
61
62 //描画インターバル
63 var interval = 10;
64
65 // 変更前の値
66 var num = parseInt($('#count').attr('data-value')) + 0;
67
68 // 増減
69 var diff = tgt - num;
70
71 var id = setInterval(function () {
72
73 if ((diff > 0 && num <= tgt) || (diff < 0 && num > tgt)) {
74 num += Math.floor(diff / refreshCount);
75 } else {
76 num = tgt;
77 clearInterval(id);
78 }
79 $('#count').text(number_format(num))
80 .attr('data-value', num);
81
82 }, interval);
83 }
84
85 function pay() {// Ajax通信
86 $.ajax({
87 url: 'inc/calculation.php',
88 type: 'post',
89 dataType: 'json',
90 data: $("form").serialize()
91 }).done(function (response) {
92 loop_set(response['tgt']);
93 }).fail(function () {
94 alert('通信失敗');
95 });
96 }
97
98 $('.item').on('click', function () {
99 pay();
100 });
101 </script>
102 </body>
103</html>
#追記
html
1
2 <script>
3 function number_format(num) {
4 return num.toLocaleString();
5 }
6
7 function loop_set(tgt) {
8
9 //描画回数
10 var refreshCount = 37;
11
12 //描画インターバル
13 var interval = 10;
14
15 // 変更前の値
16 var num = parseInt($('#count').attr('data-value')) + 0;
17
18 // 増減
19 var diff = tgt - num;
20
21 var id = setInterval(function () {
22
23 if ((diff > 0 && num <= tgt) || (diff < 0 && num > tgt)) {
24 num += Math.floor(diff / refreshCount);
25 } else {
26 num = tgt;
27 clearInterval(id);
28 }
29 $('#count').text(number_format(num))
30 .attr('data-value', num);
31
32 }, interval);
33 }
34
35 function pay() {// Ajax通信
36 if ($("form").serialize() === '') {
37 loop_set(0);
38 return;
39 }
40 $.ajax({
41 url: 'inc/calculation.php',
42 type: 'post',
43 dataType: 'json',
44 data: $("form").serialize()
45 }).done(function (response) {
46 loop_set(response['tgt']);
47 }).fail(function () {
48 alert('通信失敗');
49 });
50 }
51
52 $('.item').on('click', function () {
53 pay();
54 });
55
56 </script>