Dash应用计算运行时如何将按钮置为disabled并显示加载动画

核心问题说明 #

你之前实现失败的核心原因是Dash普通回调的同步执行机制：所有输出会等回调函数逻辑完全执行完毕后一次性返回，所以把按钮状态和长计算放在同一个回调里时，永远看不到中间的禁用状态，函数执行完直接返回了计算后的可用状态。另外全局变量存储状态的方案在多用户、多进程部署场景下会出现状态串扰，不建议使用。

以下是两种稳定可行的实现方案：

方案1：回调链 + dcc.Store 存储状态（无额外依赖，兼容所有Dash2.0+版本） #

通过dcc.Store存储计算状态，拆分三个职责单一的回调实现流程：点击按钮触发状态变更→状态变更后触发长计算→计算完成后更新状态恢复UI。

import dash
from dash import html, dcc, Input, Output, callback, no_update
import time
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Button(id='submit-btn', children='运行计算', disabled=False),
    html.Div(id='spinner-container'), # 加载动画容器
    dcc.Graph(id='result-graph'),
    # 存储计算状态：idle=空闲 / running=计算中
    dcc.Store(id='calc-status', data='idle')
])

# 回调1：点击按钮触发状态变为计算中
@callback(
    Output('calc-status', 'data'),
    Input('submit-btn', 'n_clicks'),
    prevent_initial_call=True
)
def start_calc(n_clicks):
    return 'running'

# 回调2：根据计算状态控制按钮和加载动画显示
@callback(
    Output('submit-btn', 'disabled'),
    Output('spinner-container', 'children'),
    Input('calc-status', 'data'),
)
def control_ui(status):
    if status == 'running':
        # 计算中：按钮禁用，显示加载提示（可替换为dbc.Spinner组件）
        return True, html.Div('计算中，请稍候...')
    # 空闲：按钮可用，隐藏加载
    return False, ''

# 回调3：监听计算状态，执行长计算，返回结果后重置状态
@callback(
    Output('result-graph', 'figure'),
    Output('calc-status', 'data', allow_duplicate=True),
    Input('calc-status', 'data'),
    prevent_initial_call=True
)
def run_long_calc(status):
    if status != 'running':
        return no_update
    # 模拟20秒长计算
    time.sleep(20)
    # 生成结果图表
    df = pd.DataFrame({'x': [1,2,3,4], 'y': [10,20,30,40]})
    fig = px.line(df, x='x', y='y', title='计算结果')
    return fig, 'idle'

if __name__ == '__main__':
    app.run_server(debug=True)

如果你的Dash版本低于2.4不支持allow_duplicate，可以新增一个dcc.Store存储计算完成触发器，绕开重复输出限制即可。

方案2：官方原生长回调（推荐，实现最简洁） #

Dash 2.0+ 原生支持长回调功能，通过running参数可以直接配置计算运行期间的UI状态，结束后自动恢复，无需手动管理状态流转。
首先安装依赖：

pip install dash[diskcache]

实现代码：

import dash
from dash import html, dcc, Input, Output, callback
from dash.long_callback import DiskcacheLongCallbackManager
import diskcache
import time
import plotly.express as px
import pandas as pd

# 初始化长回调管理器
cache = diskcache.Cache("./cache")
long_callback_manager = DiskcacheLongCallbackManager(cache)

app = dash.Dash(__name__, long_callback_manager=long_callback_manager)

app.layout = html.Div([
    html.Button(id='submit-btn', children='运行计算', disabled=False),
    html.Div(id='spinner-container'),
    dcc.Graph(id='result-graph'),
])

@callback(
    Output('result-graph', 'figure'),
    Input('submit-btn', 'n_clicks'),
    # running参数配置：(输出项, 运行时的值, 结束后的值)
    running=[
        (Output('submit-btn', 'disabled'), True, False),
        (Output('spinner-container', 'children'), html.Div('计算中，请稍候...'), ''),
    ],
    prevent_initial_call=True,
)
def run_long_calc(n_clicks):
    # 20秒长计算逻辑
    time.sleep(20)
    df = pd.DataFrame({'x': [1,2,3,4], 'y': [10,20,30,40]})
    fig = px.line(df, x='x', y='y', title='计算结果')
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

内容的提问来源于stack exchange，提问作者erixliechtenstein