JQuery: вызов только один раз

Question

Как заставить jQuery запускать функцию обратного вызова только один раз?

$(document).on('ready turbolinks:load', function callback_function() {
    console.log('callback function') // fired twice, on 'ready' and 'turbolinks:load' events
});

Я хочу, чтобы callback_function была вызвана на "ready", на "turbolinks: load", но не дважды, если происходят оба событияна той же странице.

Редактировать: Мне известна функция jQuery one (), которая на самом деле не отвечает на вопрос.Согласно документам jQuery: «Обработчик выполняется не более одного раза для каждого элемента для каждого типа события».Я хочу наоборот: обработчик будет выполнен один раз для всех типов событий.

Answer 1

Вы можете отменить обратный вызов, используя jQuery.off и используя счетчик для максимального количества повторений.При .one обратный вызов выполняется один раз для каждого события, что нежелательно

let count = 0;
function callbackWithCounter(event) {
  if (count++ >= 1){
    $(this).off(event)
    return;
  }
  console.log("button clicked " + count);
}

function simpleCallback(event) {
  console.log("button clicked");
}

$('#clickme').one("click mousedown mouseup", simpleCallback);
$('#clickme-two').on("click mousedown mouseup", callbackWithCounter);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='clickme'>Click me using .one</button><br/>
<button id='clickme-two'>Click me with a counter and .off</button>

Вы также можете создать вспомогательную функцию для управления этими обратными вызовами с ограниченным сроком действия

//a wrapper that will ensure the callback "self-destructs" and will be unbound correctly
function makeSelfDestructingEventCallback(maxExecutions, callback) {
  let count = 0;
  
  return function(event) {
    if (count++ >= maxExecutions){
      $(this).off(event)
      return;
    }
    //pass any normal arguments down to the wrapped callback
    return callback.apply(this, arguments);
  }
}

function callback(event) {
  console.log("button clicked");
}

$('#clickme').on("click mousedown mouseup", makeSelfDestructingEventCallback(1, callback));

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

А вот то же самое в карри

//a curried wrapper that will ensure the callback "self-destructs" and will be unbound correctly
function makeSelfDestructingEventCallback(maxExecutions) {
  return function(callback) {
    let count = 0;
    return function(event) {
      if (count++ >= maxExecutions){
        $(this).off(event)
        return;
      }
      //pass any normal arguments down to the wrapped callback
      return callback.apply(this, arguments);
    }
  }
  
}

function callback(event) {
  console.log("button clicked");
}

let one = makeSelfDestructingEventCallback(1);
let two = makeSelfDestructingEventCallback(2);

$('#clickme').on("click mousedown mouseup", one(callback));
$('#clickme-two').on("click mousedown mouseup", two(callback));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='clickme'>Click me - single execution</button><br/>
<button id='clickme-two'>Click me - executes twice</button>