Adding a delay before keyup() fires in jQuery
https://stackoverflow.com/questions/7609757
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I have read through some of the suggested questions but I am not sure exactly how to implement them:
- (jquery/js) - get text from field on keyup, but with delay for further typing
- How to delay the .keyup() handler until the user stops typing?
- How to trigger an onkeyup event that's delayed until a user pauses their typing?
I have 8 textboxes, 7 are used for numeric input and the 8th is a total. i.e. 7.5 + 7.5 + 7.5 + 7.5 + 7.5 + 0.0 + 0.0 = 37.5
I have the jQuery working so that it monitors each textboxes keyup() and adds all of the values and calculates the total.
I decided that I want to format the users input in the 7 textboxes so that it comes out like #.# if they enter "1" or ".1" i.e. "1.0" or "0.1".
The problem is that I need to add a delay before the input is formatted and I am unsure as to how I do it with javascript and/or jquery.
<script type="text/javascript">
$(function () {
var content = $('input[id*="txtMondayHours"]').val();
$('input[id*="txtMondayHours"]').keyup(function () {
if ($('input[id*="txtMondayHours"]').val() != content) {
content = $('input[id*="txtMondayHours"]').val();
$('input[id*="txtMondayHours"]').val((new Number($('input[id*="txtMondayHours"]').val())).toFixed(2));
var hoursMon = new Number(content);
var hoursTue = new Number($('input[id*="txtTuesdayHours"]').val());
var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
}
});
var content2 = $('input[id*="txtTuesdayHours"]').val();
$('input[id*="txtTuesdayHours"]').keyup(function () {
if ($('input[id*="txtTuesdayHours"]').val() != content2) {
content2 = $('input[id*="txtTuesdayHours"]').val();
var hoursMon = new Number(content2);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
}
});
var content3 = $('input[id*="txtWednesdayHours"]').val();
$('input[id*="txtWednesdayHours"]').keyup(function () {
if ($('input[id*="txtWednesdayHours"]').val() != content3) {
content3 = $('input[id*="txtWednesdayHours"]').val();
var hoursMon = new Number(content3);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtTuesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
}
});
var content4 = $('input[id*="txtThursdayHours"]').val();
$('input[id*="txtThursdayHours"]').keyup(function () {
if ($('input[id*="txtThursdayHours"]').val() != content4) {
content4 = $('input[id*="txtThursdayHours"]').val();
var hoursMon = new Number(content4);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtTuesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
}
});
var content5 = $('input[id*="txtFridayHours"]').val();
$('input[id*="txtFridayHours"]').keyup(function () {
if ($('input[id*="txtFridayHours"]').val() != content5) {
content5 = $('input[id*="txtFridayHours"]').val();
var hoursMon = new Number(content5);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtTuesdayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
}
});
var content6 = $('input[id*="txtSaturdayHours"]').val();
$('input[id*="txtSaturdayHours"]').keyup(function () {
if ($('input[id*="txtSaturdayHours"]').val() != content6) {
content6 = $('input[id*="txtSaturdayHours"]').val();
var hoursMon = new Number(content6);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtTuesdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
}
});
var content7 = $('input[id*="txtSundayHours"]').val();
$('input[id*="txtSundayHours"]').keyup(function () {
if ($('input[id*="txtSundayHours"]').val() != content7) {
content7 = $('input[id*="txtSundayHours"]').val();
var hoursMon = new Number(content7);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtTuesdayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
}
});
});
</script>
Ideally, I would like to fire this line:
$('input[id*="txtMondayHours"]').val((new Number($('input[id*="txtMondayHours"]').val())).toFixed(2));
After a specified time e.g. 100ms
Updated working code:
<script type="text/javascript">
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(function () {
var content = $('input[id*="txtMondayHours"]').val();
$('input[id*="txtMondayHours"]').keyup(function () {
if ($('input[id*="txtMondayHours"]').val() != content) {
content = $('input[id*="txtMondayHours"]').val();
var hoursMon = new Number(content);
var hoursTue = new Number($('input[id*="txtTuesdayHours"]').val());
var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
delay(function () {
$('input[id*="txtMondayHours"]').val((new Number($('input[id*="txtMondayHours"]').val())).toFixed(2));
}, 750);
}
});
var content2 = $('input[id*="txtTuesdayHours"]').val();
$('input[id*="txtTuesdayHours"]').keyup(function () {
if ($('input[id*="txtTuesdayHours"]').val() != content2) {
content2 = $('input[id*="txtTuesdayHours"]').val();
var hoursMon = new Number(content2);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
delay(function () {
$('input[id*="txtTuesdayHours"]').val((new Number($('input[id*="txtTuesdayHours"]').val())).toFixed(2));
}, 750);
}
});
var content3 = $('input[id*="txtWednesdayHours"]').val();
$('input[id*="txtWednesdayHours"]').keyup(function () {
if ($('input[id*="txtWednesdayHours"]').val() != content3) {
content3 = $('input[id*="txtWednesdayHours"]').val();
var hoursMon = new Number(content3);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtTuesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
delay(function () {
$('input[id*="txtWednesdayHours"]').val((new Number($('input[id*="txtWednesdayHours"]').val())).toFixed(2));
}, 750);
}
});
var content4 = $('input[id*="txtThursdayHours"]').val();
$('input[id*="txtThursdayHours"]').keyup(function () {
if ($('input[id*="txtThursdayHours"]').val() != content4) {
content4 = $('input[id*="txtThursdayHours"]').val();
var hoursMon = new Number(content4);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtTuesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
delay(function () {
$('input[id*="txtThursdayHours"]').val((new Number($('input[id*="txtThursdayHours"]').val())).toFixed(2));
}, 750);
}
});
var content5 = $('input[id*="txtFridayHours"]').val();
$('input[id*="txtFridayHours"]').keyup(function () {
if ($('input[id*="txtFridayHours"]').val() != content5) {
content5 = $('input[id*="txtFridayHours"]').val();
var hoursMon = new Number(content5);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtTuesdayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
delay(function () {
$('input[id*="txtFridayHours"]').val((new Number($('input[id*="txtFridayHours"]').val())).toFixed(2));
}, 750);
}
});
var content6 = $('input[id*="txtSaturdayHours"]').val();
$('input[id*="txtSaturdayHours"]').keyup(function () {
if ($('input[id*="txtSaturdayHours"]').val() != content6) {
content6 = $('input[id*="txtSaturdayHours"]').val();
var hoursMon = new Number(content6);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtTuesdayHours"]').val());
var hoursSun = new Number($('input[id*="txtSundayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
delay(function () {
$('input[id*="txtSaturdayHours"]').val((new Number($('input[id*="txtSaturdayHours"]').val())).toFixed(2));
}, 750);
}
});
var content7 = $('input[id*="txtSundayHours"]').val();
$('input[id*="txtSundayHours"]').keyup(function () {
if ($('input[id*="txtSundayHours"]').val() != content7) {
content7 = $('input[id*="txtSundayHours"]').val();
var hoursMon = new Number(content7);
var hoursTue = new Number($('input[id*="txtMondayHours"]').val());
var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val());
var hoursThu = new Number($('input[id*="txtThursdayHours"]').val());
var hoursFri = new Number($('input[id*="txtFridayHours"]').val());
var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val());
var hoursSun = new Number($('input[id*="txtTuesdayHours"]').val());
$('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2)));
delay(function () {
$('input[id*="txtSundayHours"]').val((new Number($('input[id*="txtSundayHours"]').val())).toFixed(2));
}, 750);
}
});
});
</script>
Solution
Put your code in a timeout. Then on subsequent 1keyup events, clear the timeout and reset it.
That is what this one is doing How to delay the .keyup() handler until the user stops typing?
OTHER TIPS
You could use the underscore.js library's debounce function.
Use Ben Alman's jQuery throttle / debounce: http://benalman.com/projects/jquery-throttle-debounce-plugin/.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
