只执行一次函数

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

在点击时执行的function表示绘制到目标元素的谷歌地图。 该函数如下所示:

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,但收效甚微。

使用jQuery的.one()

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

根据OP的解释:总是有可能为元素定义多个click事件。

因此,您可以使用.one()定义一个,使用on()定义另一个,将代码仅在第一个中运行一次。

你可以只点击一次点击:

 $(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'); } }); 

两种选择:

  1. 使用两个事件处理程序:一个用one定义,另一个用on
  2. 在封口中使用计数器。

就像是:

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