CODEWITHSUNDEEP
javascript
Jason Chen
Jason Chen

Reputation: 2577

Javascript disable click event until after function complete?

Currently my code is like so. As is, what this feature does, is when clicked, it turns an SVG element to a certain color depending upon what conditions are met (in this instance, sting.state.mi === 'und').

After that click, the SVG item it is linked to changes color, as seen in m[geography.id]. However, if I spam this button enough times then I can get the wrong colors to show up.

I would like to avoid users spamming my click button.

Using datamap.svg.select('.datamaps-subunit.MI).disabled = true does not really do the trick. However, I hope it gets the point across.

Below is my code.

datamap.svg.select('.datamaps-subunit.MI').on('click', function(geography) {
var m = {};

if (sting.state.mi === 'und'){
     datamap.svg.select('.datamaps-subunit.MI').disabled = true;    
     sting.setState({trumpnums: sting.state.trumpnums + 12});
     sting.setState({mi: 'right'});
     m[geography.id] = 'tomato';
     datamap.svg.select('.datamaps-subunit.MI').disabled = false;
     }
});

This example uses Reactjs and Datamaps, though I don't imagine that's entirely relevant.

Upvotes: 0

Views: 439

Answers (1)

Rob M.
Rob M.

Reputation: 36541

A simple flag should do the trick:

var waiting = false;
datamap.svg.select('.datamaps-subunit.MI').on('click', function(geography) {
    // only run the logic if it isn't already being run
    if (!waiting) {
         waiting = true;
         var m = {};

         if (sting.state.mi === 'und'){
            datamap.svg.select('.datamaps-subunit.MI').disabled = true;    
            sting.setState({trumpnums: sting.state.trumpnums + 12});
            sting.setState({mi: 'right'});
            m[geography.id] = 'tomato';
            datamap.svg.select('.datamaps-subunit.MI').disabled = false;
            waiting = false;
        }
    }
});

Also, you can set all of your state at once and setState will call a supplied callback once it's complete:

if (sting.state.mi === 'und'){
   sting.setState({
     trumpnums: sting.state.trumpnums + 12,
     mi: 'right'
   }, function() {
     m[geography.id] = 'tomato';
     waiting = false;
   });
}

Upvotes: 2

Related Questions