时间戳

首页 > 解决方案 > 当我使用多个 jQuery change() 方法调用它时，如何避免多次调用我的函数？

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

问题描述

我有一个价格标签，只要用户更改我的产品下拉列表、出发日期和返回日期的值，它就会动态变化。getPrice()每当这三个发生变化时，我都会打电话。

我的目标是只调用一次 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，因为它们可能会帮助我解决我的问题。如果我的问题有点令人困惑，我很抱歉。

标签： javascriptjquery

解决方案

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

推荐阅读