Blazor中JS互操作引发线程锁问题求助

问题核心 #

在Blazor WASM场景下，拖拽列表项触发ondragenter事件时调用同步阻塞的alert弹窗，导致浏览器无法完成拖拽事件的生命周期清理，出现鼠标样式异常、应用冻结的情况，且组件的DisposeAsync无法正常执行。

根本原因 #

1. 同步弹窗打断拖拽事件流：alert是同步阻塞式API，会直接暂停浏览器事件循环，而拖拽是一系列连续的事件流（dragstart→dragenter→dragover→dragleave→drop→dragend），阻塞会导致后续拖拽事件无法触发，浏览器无法重置拖拽状态（如光标样式）。
2. Blazor与JS线程同步异常：Blazor的UI更新、组件生命周期调度依赖浏览器事件循环的正常执行，alert的阻塞打乱了线程同步节奏，导致DisposeAsync等生命周期方法无法被正确调用。

解决方案 #

方案1：异步触发弹窗，规避拖拽事件阻塞 #

修改JS方法，用setTimeout将alert延迟到拖拽事件完成后执行，让浏览器先完成拖拽状态清理：

export function showAlert(message) {
    // 延迟10ms执行，确保拖拽事件流先完成
    setTimeout(() => {
        alert(message);
    }, 10);
}

方案2：替换原生弹窗为Blazor非阻塞组件 #

用Blazor内置的模态框组件替代原生alert，完全避免JS同步阻塞：

<!-- 在组件中添加自定义模态框 -->
<div class="modal @(showModal ? "d-block" : "d-none")" style="background-color: rgba(0,0,0,0.5); position: fixed; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
    <div class="modal-content p-4 bg-white rounded">
        <p>@alertContent</p>
        <button class="mt-2 btn btn-primary" @onclick="() => showModal = false">关闭</button>
    </div>
</div>

@code {
    private bool showModal;
    private string alertContent = "";

    public async Task DoJsThingy(string dataModelId)
    {
        var hoveredDataModel = _dataService.GetDataModel(dataModelId);
        if (hoveredDataModel != null)
        {
            alertContent = hoveredDataModel.Id;
            showModal = true;
            StateHasChanged();
            Console.WriteLine("Alert shown for model: " + hoveredDataModel.Id);
        }
    }
}

方案3：调整拖拽事件触发时机 #

避免在ondragenter这类高频触发的事件中执行交互逻辑，改为在拖拽结束的drop或dragend事件中处理：

<!-- 修改拖拽事件绑定 -->
<div @ref="listItems[model.Id]" draggable="true" class="@StyleDataModelListItem(model)" 
     @ondragstart="() => SetDraggingModel(model)" 
     @ondrop="() => HandleDrop(model.Id)"
     @onclick="() => SelectDataModel(model)">
    <div class="data-model-list-item-icon-container">
        <img class="data-model-list-item-icon" src="Images/data_model.svg" />
    </div>
    <div class="data-model-list-item-text">@model.Name</div>
</div>

@code {
    private DataModel? draggingModel;

    private void SetDraggingModel(DataModel model)
    {
        draggingModel = model;
    }

    public async Task HandleDrop(string targetModelId)
    {
        if (draggingModel != null)
        {
            var hoveredDataModel = _dataService.GetDataModel(targetModelId);
            if (module != null && hoveredDataModel != null)
            {
                await module.InvokeVoidAsync("showAlert", hoveredDataModel.Id);
                Console.WriteLine("Alert shown for model: " + hoveredDataModel.Id);
            }
        }
    }
}

额外优化点 #

1. 替换async void为async Task：代码中RegisterUser、CreateDataModel等方法使用async void会导致异常无法捕获、线程调度异常，改为async Task：

public async Task RegisterUser()
{
    await _userService.RegisterUser();
}

2. 优化JS模块加载逻辑：OnAfterRenderAsync中每次渲染都重新加载JS模块会造成冗余，改为仅首次渲染时加载：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender && module == null)
    {
        module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/test.js");
    }
}

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