雖然onmousedown javascript

Question

我正在製作世界地圖，並試圖從綠色變爲紅色，同時按住鼠標點擊的國家的顏色。 我可以通過多次點擊改變顏色，但是當我嘗試添加while循環時，它只是凍結。你能幫我嗎？我怎樣才能保持從綠色到紅色的顏色循環？這意味着一旦達到紅色，我不斷向下打孔鼠標，它將變爲綠色等.. Heres a fiddle for it

var color = d3.scale.linear().domain([0, 50]).range(["green", "red"]); 
var pas = []; 
var ismousedown = -1; 

country 
    .on("mousemove", function(d, i) { 

     var mouse = d3.mouse(svg.node()).map(function(d) { 
      return parseInt(d); 
     }); 

     tooltip.classed("hidden", false) 
      .attr("style", "left:" + (mouse[0] + offsetL) + "px;top:" + (mouse[1] + offsetT) + "px") 
      .html(d.properties.name); 

    }) 
    .on("mouseout", function(d, i) { 
     tooltip.classed("hidden", true); 
    }) 
    .on("mouseup", function(d, i) { 
     ismousedown = 0; 
    }) 
    .on("mouseout", function(d, i) { 
     tooltip.classed("hidden", true); 
    }) 
    .on("mousedown", function(d, i) { 
     ismousedown = 1; 
     while (ismousedown == 1) { 
      if (pas[d.id]) { 
       pas[d.id]++; 
      } else { 
       pas[d.id] = 1; 
      } 

      d3.select(this) 
       .classed("active", false) 
       .style("fill", function(d, i) { 
        return color(pas[d.id]); 
        return d.properties.color; 
       }); 
     } 
    }); 

Answer 1

我修改您的解決方案使用setInterval()。這將每N毫秒自動運行一個函數。在這個例子中，當鼠標關閉時，顏色更新代碼將每10ms運行一次（您可以在mousedown函數中調整它）。當鼠標釋放時，間隔被清除，不再運行。

Updated JSFiddle（注：我還添加了一些變量的函數的頂部）

.on("mousedown", function(d,i) { 
    var that = this; 
    ismousedown = true; 

    colorInterval = window.setInterval(function() { 
    // ... 
    }, 10); // <== runs every 10 milliseconds 
}) 

.on("mouseup", function(d,i) { 
    window.clearInterval(colorInterval); 
}); 

Answer 2

您使用一個循環，你設置的條件變量權之前，所以它總是'1'並得到支持。你根本不需要mousedown變量，因爲你的代碼已經在.on("mousedown")狀態下運行。我也實現了一個有效的while循環。但顏色變化非常快，你看不到變化發生。

我建議：

.on("mousedown", function(d, i) { 

     var counter = 0; 
     var max_counter = 255; 

     while (counter < max_counter) { 

      if (pas[d.id]) { 

       pas[d.id]++; 
      } else { 
       pas[d.id] = 1; 
      } 

      d3.select(this) 
       .classed("active", false) 
       .style("fill", function(d, i) { 
        return color(pas[d.id]); 
        return d.properties.color; }); 
      counter++; 
     } 

    });