Multiple interval object in a single page


#1

I tried to declare 3 interval objects in a single page, but it seems only the smallest interval gets fired. Is this a known issue/limitation?

    # -*- coding: utf-8 -*-
    import dash
    import dash_core_components as dcc
    import dash_html_components as html
    import plotly.graph_objs as go
    from dash.dependencies import Input, Output, Event, State
    
    app = dash.Dash()
    # app.config.supress_callback_exceptions=True
    
    def getLayout():
        return html.Div([
            html.H1(id='Title1',children='Multiple intervals in a single page',style={'text-align':'center'}),
            html.Div(id='Title2', children='''
                Test multiple intervals in a single page.
            ''',style={'margin-bottom':'50px','text-align':'center'}),
            html.Div('Div1',id='div1'),
            html.Div('Div2',id='div2'),
            html.Div('Div3',id='div3'),
            dcc.Interval(
                id='interval-component-1',
                interval=500 # in milliseconds
            ),
            dcc.Interval(
                id='interval-component-2',
                interval=300 # in milliseconds
            ),
            dcc.Interval(
                id='interval-component-3',
                interval=400 # in milliseconds
            )
        ])
    
    app.layout = getLayout
    
    @app.callback(Output('div1', 'children'),
                  events=[Event('interval-component-1', 'interval')],
                  state=[State('div1','children')])
    def update_div_1(origin):
        print('$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$','update_div_1')
        return origin+'.'
    
    
    @app.callback(Output('div2', 'children'),
                  events=[Event('interval-component-2', 'interval')],
                  state=[State('div2','children')])
    def update_div_2(origin):
        print('$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$','update_div_2')
        return origin+'.'
    
    @app.callback(Output('div3', 'children'),
                  events=[Event('interval-component-3', 'interval')],
                  state=[State('div3','children')])
    def update_div_2(origin):
        print('$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$','update_div_3')
        return origin+'.'
        
    
    if __name__ == '__main__':
        app.run_server(debug=True, port=10091, host='0.0.0.0',processes=3)

#2

Thanks for reporting @kfyao! I have confirmed the issue, I’ll look into a fix now.


#3

The dcc.Interval component’s timer is getting reset every time the app updates. I’ll have to rework how these updates work in order to fix this issue.


#4

This has been fixed in dash-core-components==0.12.5, upgrade with pip install dash-core-components==0.12.5

Thanks again for reporting!


#5

@chriddyp Thanks for quick fix.