2012-06-21 158 views
2

我有一個在click事件上執行的函數,但事情是我只希望它只執行一次。只執行一次函數

獲得點擊執行的函數代表一個谷歌地圖繪製到目標元素。功能如下:

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,因此返回false 。

回答

2

使用jQuery的.one()

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

按OP的解釋:總有一種用於元素定義超過一個點擊事件的可能性。

因此,您可以像.one()那樣定義一個,然後使用on()來定義一個,並將代碼僅在第一個中運行一次。

+0

是的,但click事件必須發生一次以上(有一類添加或每次單擊刪除),所以我如何使用它? – Roland

+1

定義兩個點擊事件。一個使用.one()運行一次,第二個始終運行,切換類 – Cranio

+0

您可以設置一些元素的屬性點擊和下次你可以檢查屬性 –

2

你可以綁定僅單擊一次,如:

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

OR

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

第二種方法是*昂貴*。當你簡單地操縱一個變量時,操縱DOM就是要求瓶頸。 –

1

兩個選擇:

  1. 使用兩個事件處理程序:一個one定義,其他與on
  2. 使用計數器關閉。

喜歡的東西:

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

是的,沒有看代碼,你總是可以使用計數器。一旦事件發生,增加你的計數器變量,並且每次只檢查一次。易如反掌。 – krikara

+0

您不必每次計算,只需增加第一次運行。然後,只是測試。如果(!counter){do_something(); counter ++)} – crafter