while onmousedown javascript

Question

I'm working on a world map and trying to change from green to red, the color of the country that is being clicked on while holding down the mouse. I'm able to change the color with multiple clicks but when i tried to add the while loop it just froze. Can you help me out please ? also how can I keep the color looping from green to red ? meaning once it reaches the color red and I keep holing down the mouse, it changes to green and etc... 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;
                });
        }
    });

You have no exit condition in your `while` loop. You set `ismousedown` equal to 1 and then it always stays 1, which causes an infinite loop (and freeze). — skyline3000, Jan 22 '17 at 17:00
I thought the mouseup function would make the ismousedown equal to 0 and force exit out of the loop. I'm very new to this ! — myriam BN, Jan 23 '17 at 10:42

Hexodus · Answer 1 · 2017-01-23T15:11:28.053

0

You're using a loop where you set the condition variable right before so it's always '1' and get stucked. You don't need the mousedown variable at all because your code is already running in .on("mousedown") state. I also implemented a while loop that works. But the color change is that fast that you don't see the change happening.

I suggest:

  .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++;
      }

  });

edited Jan 23 '17 at 15:11

answered Jan 22 '17 at 17:35

Hexodus

12,361
6
53
72

I've already tried that but it didn't work, I still have to click multiple times to change the color. here's the link for the fiddle https://jsfiddle.net/f8k5kayn/2/#&togetherjs=N1wehmViSM – myriam BN Jan 23 '17 at 10:38
@myriamBN Thanks for the fiddle - nice app by the way ;) I updated my answer to fit better to your question. – Hexodus Jan 23 '17 at 12:24

score 0 · Accepted Answer · answered Jan 23 '17 at 15:59

0

I modified your solution to use setInterval(). This will automatically run a function every N number of milliseconds. In this example, while the mouse is down, the color updating code will run every 10ms (you can adjust this in the mousedown function). When the mouse is released, the interval is cleared so it no longer runs.

Updated JSFiddle (note: I also added some variables to the top of the function)

.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);
});

answered Jan 23 '17 at 15:59

skyline3000

7,639
2
24
33

Just to touch on your while loop issue - the reason why this cannot work is because the program gets stuck in the while loop. Browsers are single-threaded and can only do/respond to one thing at a time. Without a way for the program to exit the loop, it gets stuck there indefinitely until it crashes. Even though you may release the mouse, the program is still trying to run the while loop. Not to be overly-critical, but this is a fairly basic concept in programming and one that should be very obvious for someone working on a project of this scale. – skyline3000 Jan 23 '17 at 16:00
Thank you so much :) Yeah I'm kinda in over my head with this one....cause i'm a beginner working on a big project like you said. thanks anyway, I appreciate it !! – myriam BN Jan 23 '17 at 16:24

while onmousedown javascript

2 Answers2