1秒周期で変数を渡し表示するプログラムを作成したい

やりたいこと

pythonファイルとHTMLファイル(JavaScript)で1秒周期で変数を渡し表示するプログラムを作成しているのですが、1度目の表示が成功したのち、プログラムが回りません。
このプログラムが回るようにしたいです。

ためしたこと

get_dataからget_data()に変更したものの変化なし
間隔を1000ヵら10000等に変えても同じ周期で実行され変化なし

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<title>Gunchart</title>
5	<meta charset="utf-8">
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7</head>
8
9<script>
10$(function get_data(){
11        $.ajax({
12            url : '/data',
13            type : 'GET',
14            dataType : 'json',
15        })
16        //通信成功時の処理
17        .done(function(data){
18            $('#result').text(data['my_favorite']['animal']);
19        })
20        //通信失敗時の処理
21        .fail(function(){
22            window.alert('データが取れていません');
23        })
24        console.log("更新しています")
25})
26
27setInterval(get_data(), 1000);
28</script>
29
30
31<body>
32    <div class="container">
33        <h1>Ajax charenge</h1>
34        <p id="result"></p>
35    </div>
36</body>
37</html>

Python
1def python_to_html(i,j,k):
2
3    time.sleep(3)
4    client5 = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
5
6    try:
7        client5.connect((i,8501))
8    except:
9        print("PLC接続NG")
10        return 0, 0
11
12
13    Production5 = j
14    Cycle_Time5= k
15
16    client5.send(Production5.encode("ascii"))
17    response5 = client5.recv(64)
18    response5 = response5.decode("UTF-8")
19    response5 = int(response5)
20
21    client5.send(Cycle_Time5.encode("ascii"))
22    response51 = client5.recv(64)
23    response51 = response51.decode("UTF-8")
24    response51 = int(response51)
25    response51 = response51 * Decimal('0.1')
26
27    print("send : " + Production5)
28    print("send : " + Cycle_Time5)
29
30    print("Received :" ,response5)
31    print("Received :" ,response51)
32
33    client5.close()
34
35    return response5
36
37
38
39app = Flask(__name__)
40@app.route('/', methods=['GET'])
41def index():
42    return render_template('test.html')
43
44@app.route('/data', methods=['GET'])
45def send_data():
46    a = python_to_html(ここにはIPアドレスが来ます)
47    print("processing")
48    json_data = {'my_favorite':{
49        'animal':a,
50        'food':'apple',
51        'sport':'baseball'
52        }
53    }
54    return json_data
55
56if __name__ == '__main__':
57    app.debug=True
58    app.run()

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

回答2件

javascript
1$(function(){
2  setInterval(function get_data(){
3    $.ajax({
4    });
5    console.log("更新しています");
6    return get_data;
7  }() , 1000);
8});

投稿2022/02/14 00:48

yambejp

総合スコア114779

ベストアンサー

$(function get_data(){

$()の使い方が間違っています。
$(Function)は画面描写準備が完了した後に、与えたFunctionを実行する仕組みです。
このコードでは画面の準備が完了した後にget_data()が呼ばれるため、1度だけ実行されています。
またFunctionの引数渡しの関係上、get_dataの定義がうまく行われておらずsetInterval()で参照できていない状態です。

解決策としては以下のように$()の引数を匿名関数にし、変数のスコープと実行タイミングを正しくします。

JavaScript
1$(function() {
2    function get_data(){
3        $.ajax({
4            url : 'data.json',
5            type : 'GET',
6            dataType : 'json',
7        })
8        //通信成功時の処理
9        .done(function(data){
10            $('#result').text(data['my_favorite']['animal']);
11        })
12        //通信失敗時の処理
13        .fail(function(){
14            window.alert('データが取れていません');
15        })
16        console.log("更新しています")
17    }
18    get_data(); // 初回に1000ミリ秒待ちたくないのであればすぐ実行
19    setInterval(get_data, 1000);
20});