可以单击得太快跳过jQuery Mobile中的某些操作吗? [英] Can clicking too fast skip some operations in jQuery Mobile?

问题描述

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

I have a jQuery Mobile app displaying a list of items. I can select an item and move it up or down when clicking an up or down button.

当我通过单击按钮上下移动项目时，显示的项目及其项目ID都会互换.然后，我发送ajax发布消息，并按该项目移动步骤.

When I move an item up or down by clicking the button the displayed items are swapped as well as their item-id. Then I send an ajax post message with the step moved by the item.

我看到的是，如果我单击得太快，有时该项目将无法按照预期的方式移动.可能还会发生item-id重复的情况，就好像该函数已在item-id交换操作的中间中断了一样.

What I have seen is that if I click too fast, sometime the item doesn't move all the expected way. It may also happen that the item-id becomes duplicated as if the function has been interrupted in the middle of the item-id swapping operation.

这是已知功能吗?有解决方案可以避免这种情况吗?

Is this a known feature ? Is there a solution to avoid this ?

这是移动项目的代码

$("#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' } );
    }
});

推荐答案

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

This is an expected outcome, you have click event bound to the btnListUp and btnListDown elements. Next click event is not going to wait for the first one to finish, nor will first one postpone the second one.

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

In your case only two solution are possible.

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

First, after the first click, unbound the click event from the button, like this:

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

第二，在ajax成功和错误回调期间，再次绑定click事件.这是一种方法.

Second, during the ajax success and error callback bind the click event again. This is one way.

第二种解决方案更简单，但有时您将无法使用它:

Second solution is an easier one but sometimes you will no be able to use it:

看看这个链接:

在单击1次后禁用jquery功能，以防止多次执行

这篇关于可以单击得太快跳过jQuery Mobile中的某些操作吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！