Question

我有一个价格标签，只要用户更改我的产品下拉菜单，出发日期和退货的值，该标签就会动态更改日期。每当这3个中的每一个都发生更改时，我都会呼叫getPrice()。

我的目标是仅调用getPrice（）方法一次，但仍会根据当前选择的产品，出发日期和退货日期< / strong>。

请注意，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

您可以使用Multiple Selector为多个元素调用同一事件。

请尝试使用以下更新的代码-

$(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>

当我使用多个jQuery change（）方法调用函数时，如何避免多次调用函数？

2 个答案: