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

Javascript禁用单击事件直到功能完成后？

1 个答案: