Javascript 控制双向参考事件（视频、滑块）

我的Blazor页面有一个视频和一个滑动条

滑块根据视频时间移动

此外，当用户控制滑块的进度时，视频时间也会移动

换句话说，滑块的onchange事件会影响视频，而视频的timeupdate事件也会影响滑块。 因此，当我控制滑动条时，滑动条会在原来的位置短暂绘制，而不是在我移动它的位置，然后返回到我移动它的位置

我想在控制滑块时停止视频事件

下面是我的代码。我使用的滑块和视频

=======剃刀页面=======

@*video component*@
<BlazoredVideo VideoEventOptions="options"
               TimeUpdateEvent=""="OnTimeUpdate"
               id="video1"
               style="width:100%;height:100%"
               controls="controls">
    <source src="@video1Path" type="video/mp4" />
</BlazoredVideo>

@*slider Component*@
<RadzenSlider @bind-Value="@currentVideoDuration" TValue="int" Min="0" Max="100" Change="@(e => OnChangeSliderValue(e))"></RadzenSlider>

=======js代码=======

public void OnChangeSliderValue(dynamic value)
{
    int nValue = value;
    JSRuntime.InvokeVoidAsync("VideoTimeChange", "video1", nValue);
}

public void OnTimeUpdate(VideoState state)
{
    int currentTime = (int)state.CurrentTime;
    currentVideoDuration = (int)state.CurrentTime;
}

function VideoTimeChange(id, time) {
    var vid = document.getElementById(id);
    vid.currentTime = time;
}

---

请分享您关于JavaScript的知识，Blazor试试这个-因为一切都是异步发生的，如果您设置了一个标志，那么运行JS并等待它，然后重置标志-可以让OnTimeUpdate方法中的代码知道它应该暂时忽略更新

bool allowTimeUpdates = true;
public async Task OnChangeSliderValue(dynamic value)
{
    allowTimeUpdates = false;
    int nValue = value;
    await JSRuntime.InvokeVoidAsync("VideoTimeChange", "video1", nValue);
    allowTimeUpdates = true;
}
public void OnTimeUpdate(VideoState state)
{
    if (allowTimeUpdates)
    {
        int currentTime = (int)state.CurrentTime;
        currentVideoDuration = (int)state.CurrentTime;
    }
}