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

维克多·宗永·田森

我有一个价格标签，每当用户更改我的商品下拉菜单，出发日期和退货日期的值时，它就会动态更改。getPrice()每当这3个都改变时，我就会打电话。

我的目标是只调用一次getPrice（）方法，但仍根据当前选择的产品，出发日期和退货日期计算正确的价格。

请注意，getPrice（）将dropdown，离开日期和返回日期作为参数。

我的代码基本上是这样的：

编辑-我放置了一个与我的代码相似的工作代码段。

$(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和Promise，因为它们可能会对我的问题有所帮助。抱歉，我的问题有点令人困惑。

阿尔法兹（Alfaz Jikani）

不要将更改事件用于日期值更改检测。更改日期时，请使用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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。