dcc.Interval not working

Dash Python
1

I’ve noticed a weird behavior of dcc.Interval in my application. I want to use dcc.Interval to update a paragraph in my application but the callback seems to be called only once (I’m printing n_intervals). However if there’s an error in the callback, such as a reference to an unexisting variable, the callback gets called as it should. Here’s part of my code.

layout = html.Div([
    html.H3('H3'),
    html.Div(id='my-div'),
    dcc.Link('Go to App 2', href='/apps/app2'),
    html.Br(),
    html.Div([
        html.Div([
            html.P("yolo"),
            dcc.Interval(id='interval-component',
                         interval=1*1000, n_intervals=0)
        ], className="six columns", id="objects"),
        html.Div([html.P("Empty")], className="six columns"),
    ], className="row"),
    html.Br(),
    html.Div([html.H3("Video"),
              html.Iframe(src="https://www.youtube.com/embed/N9Y86YCRRDg?&autoplay=1&loop=1&playlist=N9Y86YCRRDg&rel=0&showinfo=0&controls=0&mute=1", width="560", height="315")], id="Ad")
], style = {'textAlign': 'center'})

@app.callback(
    Output('objects', 'children'),
    [Input('interval-component', 'n_intervals')])
def timer(n):
    print(n)
    # print(asdlol) # if I enable this line the function is called periodically
    return [html.P("")]
2

The problem is that you are replacing the children of the objects div with html.P the first time the Interval fires…but the Interval is one of the children of the objects div.

So if there is an error in the callback function, the children are not replaced, which means the Interval still fires. If there is not an error, Interval will not exist anymore. You need to move the Interval outside of the children of the objects div.

1 Like
3

What if I need that the update will be executed on one of the children components?