Question

这里是HTML代码，而点击clearfix类函数将会发生，它将运行相同的函数4次。

<div class="clearfix">
    <ul id="dashboard-tab" class="nav nav-tabs pull-left">
        <li class="active" isdashboardloaded="true">
            <a data-toggle="tab" href="#dashboard_5" aria-expanded="true">DashLoadingLineChart</a>
        </li>
        <li class="" isdashboardloaded="true">
            <a data-toggle="tab" href="#dashboard_6" aria-expanded="false">Zoom</a>
        </li>
    </ul>
</div>

JS功能

$(document).on('click','.clearfix',function(){
    var dashId=$('.dashboardTabContent.active').attr('id');
    var dash_ids = bu.angular.pageScope.dashboardCollection.collection;
    var dashBoardUrl=event.target.href;
    $.each(dashObj.widgetObj,function(widgetId,widgetObj){
        clearWidget(widgetId,widgetObj.mode);
        var widget_refresh_interval = widgetObj.refresh_interval;
        //widgetInterval[widgetId] = 0;
        clearInterval(widgetInterval[widgetId]);
        bu.angular.pageScope.$digest();
        widgetWiseReload(widgetId,dashId)
        getWidgetData(widgetId,dashId,widgetObj,data_sources);
    });
});

我只需要运行此功能一次，但运行次数超过2次。

Answer 1

也许你不止一次附加这个功能。试试这个：

$(document).off("click", ".clearfix").on('click','.clearfix',function() {
    $.each(dashObj.widgetObj,function(widgetId,widgetObj){
        clearWidget(widgetId,widgetObj.mode);
        var widget_refresh_interval = widgetObj.refresh_interval;
        //widgetInterval[widgetId] = 0;
        clearInterval(widgetInterval[widgetId]);
        bu.angular.pageScope.$digest();
        widgetWiseReload(widgetId,dashId)
        getWidgetData(widgetId,dashId,widgetObj,data_sources);
    });
});

这将在再次附加事件之前分离事件，因此如果多次调用该事件，实际上它将被附加一次。

Protip：保持你的缩进清洁。

Protip 2：如果这是问题，那么你应该看看为什么这个代码被多次调用而不是使用这个hack。

Answer 2

// define a function of runOce
function runOnce(fn) {
  var isDone = false;
  return function(){
    if(isDone){
      return;
    }
    isDone = true;
    fn();
  };
}

// demo
function youWantRunFn(){
  alert(0);
}
var changeYourFn = runOnce(youWantRunFn);
// now,changeYourFn only can run once
changeYourFn(); // alert 0
changeYourFn(); // nothing

如何停止在JavaScript中反复调用同一个函数？

2 个答案: