setTimeout "change"事件处理程序，但仅适用于不同的调用方

基本上我需要做的是在 3 秒后alert()传入的值，清除任何以前的超时，但每个调用者。我可以通过为所有 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>

我会使用一个为每个元素保存计时器的对象。在这种情况下，您只能清除当前元素的计时器，并且可以区分不同元素的不同计时器。

$(".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 timers = {};
$('.brown').bind("change", function () {
    var id = $(this).attr("id");
    //clear the current timer
    clearTimeout(timers[id]);
    var s = $(this).val();
    //pause for 3 seconds before alert
    timers[id] = setTimeout(function () {
        alert(s);
    }, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

为什么不在达到 3 秒限制后简单地迭代所有输入字段？为了确保您的按钮处理正确的值，您可以向按钮添加一个data-attribute，指向您希望增加的字段，例如

<input type="text" id="first" value="0" />
<button type="button" data-target="first">Increase first</button>

如果按钮具有指向输入字段的链接，则必须更改，然后您可以使用一个事件处理程序处理所有内容，例如：

document.querySelectorAll('[data-target]').forEach( button => {
  button.addEventListener('click', handleClick);
});

在句柄单击中，您可以获取属性，并为其增加相应的字段

document.querySelectorAll('[data-target]').forEach( button => {
  button.addEventListener('click', handleClick);
});

在句柄单击中，您可以使用 event 参数来检索单击的按钮，它的目标应该是什么，然后在找到它后更新该字段

function handleClick(e) {
  let source = e.target;
  let target = source.getAttribute('data-target');
  let elem = document.getElementById( target );
  if (!elem) {
    // no elem found
    return;
  }
  elem.value = +elem.value + 1;
  if (handleClick.timer) {
    clearTimeout( handleClick.timer );
  }
  // use a function specific property for the timer
  handleClick.timer = setTimeout( () => {
    document.querySelectorAll('input').forEach( input => {
      if ( parseInt( input.value ) <= 0 ) {
        return;
      }
      alert( input.value );
    });
  }, 3000 );
}

document.querySelectorAll('[data-target]').forEach( button => {
  button.addEventListener('click', handleClick);
});
function handleClick(e) {
  let source = e.target;
  let target = source.getAttribute('data-target');
  let elem = document.getElementById( target );
  if (!elem) {
    // no elem found
    return;
  }
  elem.value = +elem.value + 1;
  if (handleClick.timer) {
  	clearTimeout( handleClick.timer );
  }
  handleClick.timer = setTimeout( () => {
    document.querySelectorAll('input').forEach( input => {
      if ( parseInt( input.value ) <= 0 ) {
        return;
      }
      alert( input.value );
    });
  }, 3000 );
}

<input type="text" id="first" value="0" />
<button type="button" data-target="first">Increase first</button>
<input type="text" id="second" value="0" />
<button type="button" data-target="second">Increase second</button>
<input type="text" id="third" value="0" />
<button type="button" data-target="third">Increase third</button>

我知道这是没有jQuery的，但我并没有真正看到它的必要性

相关内容

最新更新

热门标签：