Как избежать многократного вызова моей функции, когда я вызываю ее несколькими методами jQuery change ()?

Question

У меня есть ценник , который динамически изменяется всякий раз, когда пользователь меняет значение моего выпадающего списка продуктов , дата отъезда и дата возвращения . Я звоню getPrice() всякий раз, когда каждый из этих 3 меняется.

Моя цель - вызвать метод getPrice () только один раз, но при этом вычислить правильную цену, основываясь на выбранном в данный момент продукте , дате отъезда и дате возвращения.

Обратите внимание, что getPrice () принимает раскрывающийся список , дату отправления и дату возврата в качестве аргументов.

Мой код в основном такой:

РЕДАКТИРОВАНИЕ - я поместил фрагмент рабочего кода, который похож на мой код.

$(document).ready(function () {
getDeptFormat();
getRetFormat();

$("#dropdown").change(function () {
getDeptFormat();
getRetFormat();
getPrice();
});

$("#departureDate").change(function () {
getPrice();
});

$("#returnDate").change(function () {
getPrice();
});

$("#reset").click(function () {
$("#totalPrice").html('').append('0');
})

})


function getDeptFormat() {
    $("#departureDate").daterangepicker({    
        singleDatePicker: true, 
          "startDate":getDeptMinDate(),     
    });
}

function getRetFormat() {
    $("#returnDate").daterangepicker({    
        singleDatePicker: true,  
       "startDate":getRetMinDate(),     
    });
}

function getPrice() {
  $("#totalPrice").append("5");
}

function getDeptMinDate() {
    var add = "10/25/2019";
   
   if (parseInt($("#dropdown").val()) == 1)
   {
    add = "10/26/2019";
   }
   else if (parseInt($("#dropdown").val()) == 2)
   {
   add = "10/27/2019";
   }
   else if (parseInt($("#dropdown").val()) == 3)
   {
   add = "10/28/2019";
   }   
    return add;
}

function getRetMinDate() {
    var add = "10/26/2019";
   
   if (parseInt($("#dropdown").val()) == 1)
   {
    add = "10/27/2019";
   }
   else if (parseInt($("#dropdown").val()) == 2)
   {
   add = "10/28/2019";
   }
   else if (parseInt($("#dropdown").val()) == 3)
   {
   add = "10/29/2019";
   }   
    return add;
}

#container {
  border: 1px solid red;
padding :20px;
}

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />


<div id="container">
 <select  id="dropdown">
                            <option value="1">Product 1</option>
                            <option value="2">Product 2</option>
                            <option value="3">Product 3</option>
                        </select>
 <input type="text"  id="departureDate" spellcheck="false" autocomplete="off" />
 <input type="text"  id="returnDate" spellcheck="false" autocomplete="off" />

<div>
Price:<span id="totalPrice">0</span></div>
<button type="button" id="reset">Click to reset price</button>

</div>

Обратите внимание, что всякий раз, когда я меняю раскрывающийся список, функция getPrice () вызывается 3 раза. Функция getPrice () немного медленная, поэтому она раздражает, когда ее вызывают несколько раз. Каков наилучший способ вызвать функцию getPrice () только один раз, но при этом вычислить ее, основываясь на выбранном в данный момент выпадающем меню, дате отъезда и дате возвращения?

В настоящее время я пытаюсь понять асинхронный JavaScript и обещания на данный момент. потому что они могут помочь мне с моей проблемой. Извините, если мой вопрос немного сбивает с толку.

Answer 1

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

Пример. удалить ниже код:

$("#departureDate").change(function () {
getPrice();
});

Используйте этот код:

$("#departureDate").daterangepicker({    
        singleDatePicker: true, 
          "startDate":getDeptMinDate(),     
    }, function(start, end, label) {
        getPrice();
    });

Код ссылки пера: https://codepen.io/alfazjikani/pen/wvvPJeg

Ссылка: https://www.daterangepicker.com/

Answer 2

Вы можете вызвать одно и то же событие для нескольких элементов, используя Множественный селектор .

Пожалуйста, попробуйте с ниже обновленным кодом -

$(document).ready(function() {
  getDeptFormat();
  getRetFormat();

  $("#dropdown, #departureDate, #returnDate").change(function() {
    if ($(this).attr('id') == "dropdown") {
      getDeptFormat();
      getRetFormat();
    }
    getPrice();
  });

  $("#reset").click(function() {
    $("#totalPrice").html('').append('0');
  })

})


function getDeptFormat() {
  $("#departureDate").daterangepicker({
    singleDatePicker: true,
    "startDate": getDeptMinDate(),
  });
}

function getRetFormat() {
  $("#returnDate").daterangepicker({
    singleDatePicker: true,
    "startDate": getRetMinDate(),
  });
}

function getPrice() {
  $("#totalPrice").append("5");
}

function getDeptMinDate() {
  var add = "10/25/2019";

  if (parseInt($("#dropdown").val()) == 1) {
    add = "10/26/2019";
  } else if (parseInt($("#dropdown").val()) == 2) {
    add = "10/27/2019";
  } else if (parseInt($("#dropdown").val()) == 3) {
    add = "10/28/2019";
  }
  return add;
}

function getRetMinDate() {
  var add = "10/26/2019";

  if (parseInt($("#dropdown").val()) == 1) {
    add = "10/27/2019";
  } else if (parseInt($("#dropdown").val()) == 2) {
    add = "10/28/2019";
  } else if (parseInt($("#dropdown").val()) == 3) {
    add = "10/29/2019";
  }
  return add;
}

#container {
  border: 1px solid red;
  padding: 20px;
}

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />


<div id="container">
  <select id="dropdown">
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
  </select>
  <input type="text" id="departureDate" spellcheck="false" autocomplete="off" />
  <input type="text" id="returnDate" spellcheck="false" autocomplete="off" />

  <div>
    Price:<span id="totalPrice">0</span></div>
  <button type="button" id="reset">Click to reset price</button>

</div>