Возможен ли вызов callback одной функции из другой? JS

325

18 июля 2017, 21:32

У меня есть блок с сообщением, который вызывается js функцией showMessage() Скажем вот это вот блок:

<div>
    <label>Вопрос</label>
    <input value="Да" onclick="messageYes();" type="submit">
    <input value="Нет" onclick="messageNo();" type="submit">
    <input value="Отмена" onclick="messageCansel();" type="submit">
</div>

JS:

function hideMessage(){
}
function messageYes(){
}
function messageNo(){
}
function messageCansel(){
}
function showMessage(error, text, callback){
    При вызове одной из вышеперечисленных функций, нужно вызвать callback. Либо реализовать это так, чтобы callback вызывался при клике на кнопки.
}

Answer 1

Использован неверный подход.

В текущем виде нет никакой связи между указанными тремя функциями, и функцией showMessage. Из-за этого единственное решение - внутри функции showMessage записывать переданный callback в глобальную переменную, которую и использовать потом в указанных функциях:

var globalCallback;
function messageCancel(){
    ...
    globalCallback(...);
    ...
}
function showMessage(error, text, callback){
    ...
    globalCallback = callback;
    ...
}

Вместо этого можно просто присваивать обработчики из скрипта, и передавать в них нужный callback, например:

function hideMessage(el) { 
  console.log('hide'); 
  $(el).closest('.msg').remove(); 
} 
 
function messageYes(callback) { 
  console.log('messageYes'); 
  callback(this); 
} 
 
function messageNo(callback) { 
  console.log('messageNo'); 
  callback(this); 
} 
 
function messageCancel(callback) { 
  console.log('messageCancel'); 
  callback(this); 
} 
 
function showMessage(error, text, callback) { 
  $('.template').clone().toggleClass('template').appendTo('body') // создаем элемент для сообщения 
    // добавляем обработчики для кнопок 
    .find('.yes').click(function() { 
      messageYes.call(this, callback); 
    }).end() 
    .find('.no').click(function() { 
      messageNo.call(this, callback); 
    }).end() 
    .find('.cancel').click(function() { 
      messageCancel.call(this, callback); 
    }); 
}; 
 
function show() { 
  showMessage('', '', hideMessage); 
}

.template { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="msg template"> 
  <label>Вопрос</label> 
  <input value="Да" class="yes" type="submit"> 
  <input value="Нет" class="no" type="submit"> 
  <input value="Отмена" class="cancel" type="submit"> 
</div> 
 
<input type="button" value="show message" onclick="show()" />

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Помогите с рекурсией JS

Есть задача: написать в JS функцию которая генерирует из массива списокФункцию я написал но она работает только на первом уровне вложенности

481

javascript

Как правильно поймать Pinch event на body или HTML?

Нужно поймать событие pinch на всю страницу целиком и заменить стандартный zoom на свойДолго мучался с hammerjs, все удобно и все работает, но напрочь...

309

javascript