javascript - jQuery 悬停太慢

Question

请运行该代码段并将鼠标拖到栏上以使其变为红色。 如果鼠标拖得很慢，会填充红色，但如果移动很快，里面就会出现白洞。

如何解决？ (白洞)

我想制作一个分成 500 个部分的条，如果将其悬停，它会变成红色，并且能够快速拖动并无孔地填充它。

感谢任何帮助:)

$(function() {

  var line = $("#line");
  
  for ( var i = 0; i < 500; i++) {
  
    line.append('<div class="tile" id="t'+(i+1)+'"></div>');
    
  }
  
  var tile = $(".tile");
  
  tile.hover (
    function() { //hover-in
      $(this).css("background-color","red");
    },
    function() { //hover-out
      
    }
   );
    
});

#line{
  height: 50px;
  background-color: #000;
  width: 500px;
}
.tile {
  height: 50px;
  float: left;
  background-color: #ddd;
  width: 1px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div id="line"></div>

Answer 1

对于您的设计，一种方法是遍历第一个元素到当前悬停的元素并填充它，这不会导致空格。也就是说，您可能需要考虑使用 HTML5 Canvas 并从 0 到您的鼠标位置绘制一个矩形，这将显着提高执行速度。

$(function() {

  var line = $("#line");
  
  for ( var i = 0; i < 500; i++) {
  
    line.append('<div class="tile" id="t'+(i+1)+'"></div>');
    
  }
  
  var tile = $(".tile");
  
  tile.hover (
    function() { //hover-in
      var self = this;
      $("#line").children().each(function(){
        $(this).css("background-color","red");
        if(this == self) return false;
      });
    },
    function() { //hover-out
      
    }
   );
    
});

#line{
  height: 50px;
  background-color: #000;
  width: 500px;
}
.tile {
  height: 50px;
  float: left;
  background-color: #ddd;
  width: 1px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div id="line"></div>

---

编辑

下面是一个执行相同任务但使用 HTML 5 Canvas 的示例:

$("#line").mousemove(function(e){
  var canvas = $(this)[0];
  var ctx = canvas.getContext("2d");
  var rect = canvas.getBoundingClientRect()
  var x = e.clientX - rect.left;
  ctx.fillStyle="red";
  ctx.fillRect(0, 0, x, canvas.height);
});

#line{ background-color: #ddd; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="line" width=500 height=50 ></canvas>