Question

也许我不能在这里写所有代码，但我认为这可以解释我的问题：

for(var i = 0 ; i < 5 ; i++) {
  $('#mybutton').on('click', function() { return false; });
  $('#mybutton').on('click', function() { myfunction('123') });
}

function myfunction(text){
  console.log(text);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id = 'mybutton'> My Button </button>

结果：

我执行了myfunction 5次。

我的问题是：

如何避免myfunction执行5次（我想执行1次）而不删除循环因为我需要它为我的情况？我尝试删除onClick事件但没有工作。

谢谢

Answer 1

（我不确定为什么你真的需要在for循环中附加事件）但你可以在使用jQuery方法 .off() 附加下一个事件之前删除click事件

off()：删除事件处理程序。

示例：

$('#mybutton').off('click').on('click', function() { myfunction('123') });

希望这有帮助。

＆＃13;

for(var i = 0 ; i < 5 ; i++) {
  $('#mybutton').off('click').on('click', function() { myfunction('123') });
}

function myfunction(text){
  console.log(text);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id = 'mybutton'> My Button </button>

＆＃13;

Answer 2

以下逻辑可能更好：

const myfunction = function (a) {console.log(a)};

const callback1 = function() { return false; };
const callback2= function() { myfunction('123') }; 

 $('#mybutton').on('click', function (event) {
     for (var i=0 ; i<=5 ; i++) {
       callback1();
       callback2();
     }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="mybutton">click me</button>

Answer 3

如下所示：

for(var i = 0 ; i < 5 ; i++) {
    $('#mybutton').on('click', function() { return false; });
    if (i == 0)
        $('#mybutton').on('click', function() { myfunction('123') });
}

Answer 4

拥有更具活力的东西优雅与优雅过度设计，您可以使用Tasks类，如下所示，假设所有回调都接收相同的参数：

class Tasks {
  constructor(...tasks) {
   this.tasks = tasks;
  }
  
  run(times, ...args) {
    return Array.from({length: times}, (v, k) => k+1).map(iteration => 
      this.tasks.map(task => task(...args))                   )

  }

}

const myfunction = function (a) {console.log(a)};
const callback1 = function() { return false; };
const callback2= function() { myfunction('123') }; 


 $('#mybutton').on('click', function (event) {
     new Tasks(callback1, callback2)
       .run(5, event);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mybutton">click me</button>

使用JavaScript动态添加onClick获取多个相同的操作

4 个答案: