gpt4 book ai didi

javascript - setTimeout 在 "change"事件处理程序中,但仅适用于不同的调用者

转载 作者:行者123 更新时间:2023-12-03 02:08:11 25 4
gpt4 key购买 nike

基本上我需要做的是 alert() 3 秒后传入的值,清除之前的任何超时,但针对每个调用者。我可以通过为所有 3 个输入框创建一个更改事件处理程序来完成此操作,但我想尝试仅使用一个处理程序来完成此任务。

HTML:

<div class="container">
<input type="text" class="brown" readonly="readonly" id="txt1" value="0" />
<button class="btn" id="btn1">btn1</button>
</div>
<div class="container">
<input type="text" class="brown" readonly="readonly" id="txt2" value="0" />
<button class="btn" id="btn2">btn2</button>
</div>
<div class="container">
<input type="text" class="brown" readonly="readonly" id="txt3" value="0" />
<button class="btn" id="btn3">btn3</button>
</div>

Javascript:

$(".btn").on("click", function () {
var currnum = $(this).closest(".container").find('input[id*="txt"]').val();
var newnum = parseFloat(currnum) + 1;
$(this).closest(".container").find('input[id*="txt"]').val(newnum).trigger("change");
});

var timer;
$('.brown').bind("change", function () {
//clear all current timeouts
clearTimeout(timer);
var s = $(this).val();
//pause for 3 seconds before alert
timer = setTimeout(function () {
alert(s);
}, 3000);
});

因此,理想的结果是,如果我单击 btn1 两次,然后单击 btn2 一次,然后单击 btn3 三次,则警报将指示 2 然后1 然后3。处理程序应警报的值是 3 秒结束时相应输入的最后一个值。就我而言,我只收到一个警报(val 3),因为它会清除所有其他计时器。我可以使用 3 个不同的更改处理程序(每个输入一个)来完成此操作,但这可以用一个处理程序来完成吗?我很感激您的反馈。谢谢。

最佳答案

如果将计时器更改为数组,您的代码将正确运行,例如:

<html>

<head></head>

<body>
<div class="container">
<input type="text" class="brown" readonly="readonly" id="txt1" value="0" />
<button class="btn" id="btn1">btn1</button>
</div>
<div class="container">
<input type="text" class="brown" readonly="readonly" id="txt2" value="0" />
<button class="btn" id="btn2">btn2</button>
</div>
<div class="container">
<input type="text" class="brown" readonly="readonly" id="txt3" value="0" />
<button class="btn" id="btn3">btn3</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(".btn").on("click", function() {
var currnum =
$(this).closest(".container").find('input[id*="txt"]').val();
var newnum = parseFloat(currnum) + 1;
$(this).closest(".container").find('input[id*="txt"]').val(newnum).trigger("change");
});
var timer = [];
timer.length = $(".brown").length;
$('.brown').bind("change", function() {
var listItem = $(this);
var i = listItem.index(".brown"); //clear all current timeouts
clearTimeout(timer[i - 1]);

var s = $(this).val();
//pause for 3 seconds before alert
timer[i - 1] = setTimeout(function() {
alert(s);
timer[i - 1]
}, 3000);
//clear all current timeouts
clearTimeout(timer[i - 1]);

var s = $(this).val();
//pause for 3 seconds before alert
timer[i - 1] = setTimeout(function() {
alert(s);
}, 3000);

});
</script>
</body>

</html>

关于javascript - setTimeout 在 "change"事件处理程序中,但仅适用于不同的调用者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49708665/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com