直到功能完成後，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; 
    }); 
}