Javascriptは、機能が完了するまでクリックイベントを無効にしますか？

Question

現在、私のコードはそうです。つまり、この機能が何をしているのかをクリックすると、どの条件が満たされているかによってSVG要素が特定の色に変わります（この例ではsting.state.mi === 'und'）。

これをクリックすると、リンク先のSVG項目がm[geography.id]のように変わります。ただし、このボタンを十分にスパムすると、間違った色が表示されることがあります。

ユーザーがクリックボタンを迷惑にしないようにしたいと考えています。

datamap.svg.select('.datamaps-subunit.MI).disabled = trueを使用すると、本当にトリックはありません。しかし、私はそれがポイントを得ることを願っています。

以下は私のコードです。私はそれが全く関連性の想像していないのに

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

は、この例では、ReactjsとDatamapsを使用しています。

Answer 1

シンプルなフラグがトリックを行う必要があります。また

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

を、一度にあなたの状態のすべてを設定することができますし、それは完全だ後setStateは、指定したコールバックを呼び出します：

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

を