javascript - 只执行一次函数

Question

我有一个在点击事件上执行的函数，但问题是我希望它只执行一次。

点击时执行的函数代表一个谷歌地图绘制到目标元素。该函数如下所示：

Cluster.prototype.initiate_map_assembling = function(target, latitude, longitude) {
    var canvas = $(target).children();
    var coordinates = new google.maps.LatLng(latitude, longitude);

    var options = {
        zoom: 9,
        center: coordinates,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map($(canvas)[0], options);

    var marker = new google.maps.Marker({
        position: coordinates,
        map: map
    });
};

我在这样的click事件上运行它：

Cluster.prototype.initiate_google_maps_action = function() {
    var self = this;
    return $(this.maps_wrapper_class).each(function(index, element) {
        var canvas = $(element).parents().eq(3).find(self.map_canvas_wrapper_class);
        return $(element).on('click', function(ev) {
            var latitude = $(element).attr('data-latitude');
            var longitude = $(element).attr('data-longitude');
            self.initiate_map_assembling(canvas, latitude, longitude);
            ($(canvas).hasClass('selected')) ? $(canvas).removeClass('selected') : $(canvas).addClass('selected');
            ev.preventDefault();
        });
    });
};

我想要实现的是每次单击按钮时都停止绘图，因为它只需要一次，因为我只是隐藏容器 div 而不是破坏它。那么我该怎么做呢？我尝试在函数执行时添加临时变量（并在第一次后将其设置为 true，在启动时将其设置为 false），如果临时变量为 true，则返回 false，但收效甚微，因为我无法在绘图函数中返回 false .

score 2 · Accepted Answer

使用 jQuery 的.one().

http://api.jquery.com/one/

根据 OP 的解释：总是有可能为一个元素定义多个点击事件。

因此，您可以像已经做的那样定义一个 with.one()和另一个 with on()，让代码在第一次运行时只运行一次。

score 2 · Accepted Answer

你可以只绑定一次点击：

$(document).one('click', function(e) {
    //do your code here
});

或者

$('#someBtn').click(function(){    
    if ($(this).attr('data-once')!='already_clicked' ){
        //your code here
        $(this).attr('data-once', 'already_clicked');
    }
});

score 1 · Accepted Answer

两种选择：

使用两个事件处理程序：一个用定义one，另一个用on
在封闭处使用计数器。

就像是：

var counter = 0;
return $(element).on('click', function() {
    counter++;
    if ( counter > 1 ) {
    }
});

javascript - 只执行一次函数

3 回答 3

Related

Reference