点击太快可以跳过jQuery Mobile中的一些操作吗？

Question

我有一个显示项目列表的jQuery Mobile应用程序。单击向上或向下按钮时，我可以选择一个项目并向上或向下移动。

当我通过单击按钮向上或向下移动项目时，交换显示的项目以及项目ID。然后我发送一条ajax post消息，其中包含项目移动的步骤。

我所看到的是，如果我点击太快，有时候该项目不会以预期的方式移动。还可能发生item-id变得重复，好像该函数已经在item-id交换操作的中间被中断。

这是一个众所周知的功能吗？有避免这种情况的解决方案吗？

以下是移动项目的代码

$("#btnListUp").on( "click", function(evt)
{
    if( selectedItem && !selectedItem.hasClass('ui-first-child') )
    {
        var prev = selectedItem.prev();
        var prevId = prev.attr('item-id');
        var thisId = selectedItem.attr('item-id');
        var step = (parseInt(prevId) - parseInt(thisId))+'';
        prev.attr('item-id', thisId );
        selectedItem.attr('item-id', prevId );
        prev.detach().insertAfter(selectedItem);
        $('#ShopList').listview('refresh');
        $.ajax( {type: 'POST', url: thisId+'/moveUp', data : step,
                contentType :'applicatio/octet-stream' } );
    }
});

$("#btnListDown").on( "click", function(evt)
{
    if( selectedItem && !selectedItem.hasClass('ui-last-child') )
    {
        var next = selectedItem.next();
        var nextId = next.attr('item-id');
        var thisId = selectedItem.attr('item-id');
        var step = (parseInt(nextId) - parseInt(thisId))+'';
        next.attr('item-id', thisId );
        selectedItem.attr('item-id', nextId );
        next.detach().insertBefore(selectedItem);
        $('#ShopList').listview('refresh');
        $.ajax( {type: 'POST', url: thisId+'/moveDown', data : step,
                contentType :'applicatio/octet-stream' } );
    }
});

Answer 1

这是预期的结果，您将click事件绑定到btnListUp和btnListDown元素。下一次点击事件不会等待第一次完成，也不会先推迟第二次事件。

在您的情况下，只有两种解决方案是可能的。

解决方案1 ​​

首先，在第一次点击后，从按钮取消绑定点击事件，如下所示：

$("#btnListUp").on( "click", function(evt)
{
    $(this).off('click');

其次，在ajax成功和错误回调期间再次绑定click事件。这是一种方式。

解决方案2

第二种解决方案更容易，但有时你无法使用它：

看一下这个链接：

Disable jquery function after 1 click, to prevent multiple executions