当用户停止点击时jQuery click事件延迟

rbl8hiat 于 2023-04-20 发布在 jQuery

关注(0)|答案(2)|浏览(108)

我们有一个html输入，旁边有一个增加和减少按钮，通过点击将值更改为输入。现在的问题是，表单在点击后直接提交。
我们希望在用户停止点击时添加1秒的延迟。我们已经尝试了延迟功能，但我们面临的问题是，这直接创建了1秒的延迟。因此，当用户没有准备好点击时，1秒后表单仍然被提交。
我们想改变这一点，所以表单只在用户停止点击1秒后提交。
我们如何才能做到这一点？
HTML：

<div class="product-cart-qty-item" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
            <div class="product-cart-qty-block">
            <button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec"  class="decreaseQty"><i class="far fa-minus"></i></button>
                <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
                name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
                data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
                value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
                type="number"
                size="4"
                title="<?= $block->escapeHtml(__('Qty')) ?>"
                class="input-text qty"
                data-validate="{required:true,'validate-greater-than-zero':true}">                                             
            <button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty"><i class="far fa-plus"></i></button>
            </div> 
        </div>

jQuery：

$('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){
    var $this = $(this);
    var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');          
    var currentQty = $("#cart-"+ctrl+"-qty").val();
    if($this.hasClass('increaseQty')){
        var newAdd = parseInt(currentQty)+parseInt(1);
         $("#cart-"+ctrl+"-qty").val(newAdd);
         $('form#form-validate').submit();
    }else{
         if(currentQty>1){
            var newAdd = parseInt(currentQty)-parseInt(1);
            $("#cart-"+ctrl+"-qty").val(newAdd);
            $('form#form-validate').submit();
         }
    }
});

jquery

来源：https://stackoverflow.com/questions/75996801/jquery-click-event-delay-when-user-stops-clicking

2条答案

按热度按时间

nom7f22z1#

很难编辑你的代码使它在一个例子中工作，因为它有这么多的PHP混合在其中。然而，这里有一个简化的例子，只有一个按钮，你点击增加一个数字，并在一段时间后，当停止点击它显示一条消息。我认为你可以适应这到你的代码。
基本上，在点击时，你需要启动一个计时器，并保存它。在每次点击时，你还必须清除任何以前的计时器，并重新保存新的计时器到同一个变量。

var $input = $('#the-number');
var $btnDecrease = $('#decrease');
var $btnIncrease = $('#increase');

var timer = null;

$btnDecrease.on('click', function(){
  var num = parseInt($input.val(), 10);
  $input.val(num - 1);
  beginSubmitDelay();
});

$btnIncrease.on('click', function(){
  var num = parseInt($input.val(), 10);
  $input.val(num + 1);
  beginSubmitDelay();
});

function beginSubmitDelay(){
  clearTimeout(timer);
  timer = setTimeout(function(){
    $('#message').show();
  }, 1000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='text' readonly id='the-number' value='0'>
<button type='button' id='decrease'>-</button>
<button type='button' id='increase'>+</button>

<h4 id='message' style='color:green; display:none;'>Submitted!</h4>

赞(0）回复(0）举报 2023-04-20

rbpvctlc2#

基本的反跳功能，使用超时，并清除它时，用户做另一个行动

let submitTimer;
$(".yourSelector").on("click", function () {
  // cancel last submission
  if (submitTimer) window.clearTimeout(submitTimer);

  // your inc/dec logic

  // call submit after a delay
  submitTimer = window.setTimeout(function () {
    $('form#form-validate').submit();
  }, 1000);
});

用可重复使用的去抖方法制作

const debounce => (func, timeout) {
  let timer;
  return (...args) => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
};

const submitForm = debounce(() => $('form#form-validate').submit(), 1000);

$(".yourSelector").on("click", () => {
  // your inc/dec logic
  
  submitForm();
});

赞(0）回复(0）举报 2023-04-20

我来回答

当用户停止点击时jQuery click事件延迟

2条答案

相关问题

热门标签

最新问答