Отключение функции с помощью другой функции - Vanilla JS

ProgramBox

Отключение функции с помощью другой функции — Vanilla JS

Post author:admin
Запись опубликована:1 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css

#JavaScript #HTML #css

Вопрос:

Мне было интересно, как я отключил функцию с помощью другой функции. У меня есть форма, которая запрашивает дополнительную курсовую работу, но a скрывает входные данные, если пользователь не выполнил никакой дополнительной работы. Я хотел бы установить отказоустойчивый, на случай, если они удалят набор входных данных и передумают.

В чем мне нужна помощь, так это в написании отказоустойчивой функции, которая проверяет: если функция 1 сработала, отключите ее.

CodePen: http://codepen.io/theodore_steiner/pen/ORzpQQ

  function hideCourseWork() {
   var otherEducationHistory = document.getElementById("otherEducationHistory");
   otherEducationHistory.style.display = "none";

   if (otherEducationHistory.style.display == "none") {
     var noAdditionalCourseWork = document.getElementById("noAdditionalCourseWork");

     var checkNo = document.getElementById("checkNo");

     var undo = document.getElementById("undoNoAdditionalCourseWork");

     noAdditionalCourseWork.style.top = "-48px";
     checkNo.style.top = "-65px";
     undo.style.top = "-65px";
     undo.style.top = "-63px";
   }

 };

 <div class="input-group" id="other-education">
  <p class="subtitleDirection">Please list in chronological order, any additional cources beyond the degree(s) listed above, including any Ministry of Education Courses. If you have not completed any additional course work, please indicate.</p>
  <div class="clearFix"></div>
  <label id="otherEducation">Additional Courses*</label>
  <div id="otherEducationHistory">
    <input type="text" class="three-lines" name="otherUniversity_1" placeholder="Institution" onblur="this.placeholder='Institution'" onfocus="this.placeholder=''" />
    <input type="text" class="three-lines" name="otherDegree_1" placeholder="Degree/Diploma" onblur="this.placeholder='Degree/Diploma'" />
    <input type="date" class="three-lines" name="otherEducationYear_1" />
    <input type="button" value=" " onclick=addOtherEducation() />
  </div>
  <!--end of otherEducationHistory div-->

  <div class="clearFix"></div>
</div>
<!--end of other-education div-->

<p id="noAdditionalCourseWork">I have not completed any additional course work.</p>
<input type="radio" name="checkNo" id="checkNo" onclick="hideCourseWork()" />
<br />
<p id="undoNoAdditionalCourseWork" onclick="reAddCourseWork()">(Undo).</p>

1. Я действительно смущен, в чем проблема? Разве мы не просто скрываем и отображаем HTML-элементы на основе значения радио?

2. ДА. Тем не менее, я хотел сделать еще один шаг вперед и узнать, как я мог бы сделать это с помощью функций… Только для этого примера, а также для будущих знаний.

3. Но зачем перестраивать вещи? Мне никогда за всю мою карьеру не приходилось «отключать» функцию

4. Спасибо за информацию!

Ответ №1:

Вы не очень четко сформулировали свой вопрос, но, возможно, это поможет.

Функции — это то же самое, что и переменные. Их можно переназначить (например, для пустой функции, например)..

 function doSomething(){
    alert("didSomething");
}

function disableDoSomething(){
    window.doSomething = function(){};
}

Если вы хотите иметь возможность повторно включить функцию позже, вы могли бы сделать что-то вроде этого…

 function doSomething(){
    alert("didSomething");
}

var functionHolder;
function disableDoSomething(){
    if(!functionHolder) functionHolder = window.doSomething;
    window.doSomething = function(){};
}

function enableDoSomething(){
    window.doSomething = functionHolder;
}

1. Позвольте мне посмотреть, правильно ли я вас понимаю, в моем примере doSomething будет начальной функцией. Но в disableDoSomething вы поместили function(){}; Должен ли код отключения входить туда? Я не понимаю, как на самом деле отключить функцию.

2. просто doSomething замените своей фактической функцией. Пустые функции должны быть пустыми. Этот ответ фактически является тем же самым ответом, что и приведенный выше, единственное отличие заключается в том, как определяются функции. оба используют одну и ту же концепцию назначения функции пустой функции.

3. Имеет смысл. Спасибо за объяснение.

Ответ №2:

 var foo = () => { /* foo definition */ },
    bar = foo;

/* re-assign foo to a new, empty, function implementation;
   effectively "disabling" it */
foo = () => {};

/* ... code that uses function reference foo ...*/

/* re-enable foo's original behavior by assigning bar to foo */
foo = bar;

Ради потомков (ES5):

 var foo = function() { /* foo definition */ },
    bar = foo;

/* re-assign foo to a new, empty, function implementation;
   effectively "disabling" it */
foo = function(){};

/* ... code that uses function reference foo ...*/

/* re-enable foo's original behavior by assigning bar to foo */
foo = bar;