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

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

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

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

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

这是移动项目的代码

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

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

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

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

解决方案2

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

看看这个链接：

单击1后禁用jqueryfunction，以防止多次执行