Svelte中拖动视频进度条时事件重复触发的原因咨询

先看你的代码：

<script >
    import {onMount} from "svelte";
    let video
    let time
    onMount(()=>{
        const events=["canplay","canplaythrough","seeked","seeking"]
        events.forEach((value)=>{
            video.addEventListener(value,()=>{
                console.log(value)})
        })
    })
</script>

<video src="/suzhou.mp4" controls
       bind:this={video}
       bind:currentTime={time}
></video>

出现重复触发的核心原因是Svelte双向绑定的内部逻辑副作用：

• 当你使用bind:currentTime={time}时，Svelte会自动为video添加timeupdate事件监听器，用来同步time变量和video的currentTime值，实现双向绑定。
• 拖动进度条时，首先会触发原生的seeking和seeked事件（这时候你的监听器会各打印一次）。
• 但Svelte在同步time变量后，为了确保双向绑定的一致性，会再次尝试设置video的currentTime值——哪怕这个值和当前的currentTime完全一样。
• 这次额外的赋值操作，会再次触发浏览器原生的seeking和seeked事件，导致你的监听器重复打印日志。

而当你不绑定currentTime时，Svelte不会介入video的currentTime变更流程，浏览器只会触发一次原生的seeking/seeked事件，符合你的预期。

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