只执行一次函数 [英] execute a function only once

问题描述

我有一个在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 
}）; 
}; 
  

我正在点击像这样的事件：

  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 = $（元素）.attr（'data-longitude'）; 
 self.initiate_map_assembling（canvas，latitude，longitude）; 
（$（canvas）.hasClass（'selected'））？$（canvas）。 （）; 
}）; 
} 
}; 
  

我想要实现的是每次单击按钮时停止绘图，因为它只需要一次因为我只隐藏容器div而不是销毁它。那我怎么能这样做呢？我尝试在函数执行时添加临时变量（并在第一次之后将其设置为true，并在启动时将其设置为false），如果临时变量为true，则返回false，但由于我无法在绘图函数内返回false，因此返回false 。

解决方案

使用jQuery的 .one（）。

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

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

所以你可以用 .one（）定义一个，另一个用 on（） code>就像你已经做的那样，把代码只在第一次运行一次。

I have a function which executes on click event, but the thing is that I want it to execute only once.

The function that get's executed on click represents a google map plotting to an targeted element. The function looks like this :

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

And I'm running it on click event like this :

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

What I want to achieve is stop the plotting each time I click the button, because it's only needed once since I'm only hiding the container div and not destroying it. So how could I do that ? I tried with temporary variables added when the function executes ( and setting it as true after the first time and as false when initiated ) and returning false if the temporary variable is true, but with little success as I could not return false inside the plotting function.

解决方案

Use jQuery's .one().

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

As per OP's explanation: there's always the possibility to define more than one click event for an element.

So you can define one with .one() and the other with on() as you already do, putting the code to run only once in the first.

这篇关于只执行一次函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！