javascript - 当我使用多个 jQuery change() 方法调用我的函数时，如何避免多次调用它？

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 和 promises，因为它们可能会帮助我解决我的问题。如果我的问题有点令人困惑，我很抱歉。

Answer 1

不要将更改事件用于日期值更改检测。更改日期时使用日期选择器回调函数。

例。删除以下代码:

$("#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/