У меня возник баг когда очень быстро проводишь курсором по превью

код работает правильно когда медлено наводишь и убираешь курсор с превью но если всё делать быстро происходит баг и превью на котором был курсор не возвращает назад изображение вместо видео

cover = "none";
function video_show(event, video_id){
if(cover == "none" || event.target.id == "prevideo"){
  //функция которая изменяет изображение на видео 
  if(event.target.id != "cover" && event.target.id != "prevideo"){
    console.log("nope");
  }
  if(event.target.id == "cover"){
    cover = event.target;
  

    cover_batya = cover.parentNode;
    pre_video = cover_batya.querySelector('video');
    pre_video.src = "http://freeworld.com/watch/" + video_id + "/vid.mp4";

    try {
      pre_video.addEventListener('canplay', () => {
        pre_video.play();
      });
    }
    catch(error){
      cover.style.opacity = "1";
      cover.style.zIndex = "20";
    
      pre_video.src = "";
      console.log(error.message);
    }
    finally{

    }
    cover.style.zIndex = "10";
    cover.style.opacity = "0";
  } 

}
else{
  cover.style.opacity = "1";
  cover.style.zIndex = "20";

  pre_video.src = "";
}
}

function cover_show(event){
  //функция которая изменяет видео на изображение 
  if(event.target.id == "prevideo"){
    //cover = event.target.parentNode.getElementById('cover');
    pre_video = event.target;
    cover = pre_video.parentNode.querySelector('img');
    cover.style.opacity = "1";
    cover.style.zIndex = "20";

    pre_video.src = "";
  }
  cover = "none";
}

Videoy = false;
function butt() {
  video_container = document.getElementById("video_container")
  video_container.insertAdjacentHTML("beforeend", `<a  class="video_url" name="video" id="`+ videoid +`" href="http://freeworld.com/watch/` + videoid + `"><div class="div_video" id="video" ><div style="z-index: 20; border-radius: 10px;  height: 200px;" id="hi" onmouseover="video_show(event, `+videoid+`)") onmouseout="cover_show(event)"> <img loading="lazy" id="cover" src="http://freeworld.com/watch/` + videoid + `/cover.png" class="video"> </img> <video src="" style="border-radius:10px; width:350px; height:200px; z-index:15; position:absolute; box-shadow: none;" class="video_shadow" id="prevideo" controls muted="muted"> </video></div> <h3 class = "video_text" > `+ VideoName  +` </h3> <a href="http://freeworld.com/account/`+ creator_id +`"> </div> </a>  `)   
  Videoy = true;
  
}


function populate() {
  while(true) {
    let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
    
    if (windowRelativeBottom > document.documentElement.clientHeight + 500) break;
      load();
      load();
      load();
      break;
  }
}

function load() {
  
  $.ajax({ url:"http://freeworld.com/database.php", 
      type:"POST",
      datatype: 'json', 
      
      //data: ({'videoid': Math.floor(Math.random() * (159 - 157 + 1)) + 157}),
      success: function(data) {
        if (data)
          data = JSON.parse(data);
          videoid = data['1'];
          VideoName = data['video_name']; 
          creator_id = data['creator_id'];
          creator = data['creator_name']
          butt();    
          
      }

});


  
}


for (let i = 0; i < 100; i++) {
  load();
} 


window.addEventListener('scroll', populate);