Question

基本上我需要做的是if r.Method == "POST" && r.FormValue("pincodeVal") != "" { var cliente, dd, mm, aaaa, email string redirectt := "http://" + r.Host + "/" + GetMD5Hash(randString(10)) session1, _ := store.Get(r, "loginSession") email = GetSes(session1.Values["email"]) cliente_cookie, err := r.Cookie("codicecliente") if err == nil { cliente = cliente_cookie.Value } dd_cookie, err := r.Cookie("dd") if err == nil { dd = dd_cookie.Value } mm_cookie, err := r.Cookie("mm") if err == nil { mm = mm_cookie.Value } aaaa_cookie, err := r.Cookie("aaaa") if err == nil { aaaa = aaaa_cookie.Value } pincode := r.FormValue("pincodeVal") if cliente == "" || dd == "" || mm == "" || aaaa == "" { http.Redirect(w, r, redirectt + "/login.html", 302) } } 3秒后传入的值，清除之前的超时，但每个调用者。我可以通过为所有3个输入框创建一个更改事件处理程序来完成此操作，但是想尝试使用一个处理程序来完成此操作。

HTML：

alert()

使用Javascript：

<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>

如果我点击$(".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秒启动时相应输入的最后一个值。就我而言，我只是得到一个警报（val 3），因为它清除了所有其他计时器。我可以使用3个不同的更改处理程序完成此操作，每个输入一个，但是这可以通过一个处理程序完成吗？我很感激反馈。谢谢。

Answer 1

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

＆＃13;

<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>

＆＃13;

Answer 2

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

$(".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>

Answer 3

为什么不在你达到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);
});

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

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，但我并没有真正看到它的需要

“更改”事件处理程序中的setTimeout，但仅适用于不同的调用者

3 个答案: