Javascript mousup事件触发得很晚

Javascript mousup事件触发得很晚,javascript,jquery,google-chrome,mouseup,Javascript,Jquery,Google Chrome,Mouseup,我有一个非常好用的鼠标,但是如果我做一些拖动操作,mouseup事件开始非常慢。触发事件时大约需要1秒的时间。如果我转储mousemove事件的结尾,它会立即停止,但mouseup事件会在第二次之后开始。我为代码中的每个方法都添加了console.log(),但是在drag stop和mouseup之间没有调用。可能是什么原因 问题如何在浏览器中调试可能的并行进程?代码如下所示: .... state.doc .on( 'mousemove', d

我有一个非常好用的鼠标,但是如果我做一些拖动操作,mouseup事件开始非常慢。触发事件时大约需要1秒的时间。如果我转储mousemove事件的结尾,它会立即停止,但mouseup事件会在第二次之后开始。我为代码中的每个方法都添加了console.log(),但是在drag stop和mouseup之间没有调用。可能是什么原因 问题如何在浏览器中调试可能的并行进程?代码如下所示:

    ....
        state.doc
            .on( 'mousemove', dragging )
            .on( 'mouseup', endDrag );

    }

    /**
     * @desc Start dragging
     * @param e event obj.
     */
    function dragging( e )
    {
        ...

        console.log('dragging end');
    }


    function endDrag( e )
    {
        var cEl = state.cEl,
            hintNode = $( '#sortableListsHint', state.rootEl.el ),
            hintStyle = hint[0].style,
            targetEl = null, // hintNode/placeholderNode
            isHintTarget = false, // if cEl will be placed to the hintNode
            hintWrapperNode = $( '#sortableListsHintWrapper' );

        if ( hintStyle.display == 'block' && hintNode.length && state.isAllowed )
        {
            targetEl = hintNode;
            isHintTarget = true;
        }
        else
        {
            targetEl = state.placeholderNode;
            isHintTarget = false;
        }

        offset = targetEl.offset();

        cEl.el.animate( { left: offset.left - state.cEl.mL, top: offset.top - state.cEl.mT }, 250,
            function()  // complete callback
            {
                tidyCurrEl( cEl );

                targetEl.after( cEl.el[0] );
                targetEl[0].style.display = 'none';
                hintStyle.display = 'none';
                // This has to be document node, not hint as a part of documentFragment.
                hintNode.remove();

                hintWrapperNode
                    .removeAttr( 'id' )
                    .removeClass( setting.hintWrapperClass );

                if ( hintWrapperNode.length )
                {
                    hintWrapperNode.prev( 'div' ).append( opener.clone( true ) );
                }

                var placeholderNode = state.placeholderNode;
                // Directly removed placeholder looks bad. It jumps up if the hint is below.
                if ( isHintTarget )
                {
                    placeholderNode.slideUp( 150, function()
                    {
                        var placeholderParent = placeholderNode.parent();
                        var placeholderParentLi = ( ! placeholderParent.is( state.rootEl.el ) ) ? placeholderParent.closest( 'li' ) : null;

                        placeholderNode.remove();
                        tidyEmptyLists();

                        setting.onChange( cEl.el );
                        setting.complete( cEl.el ); // Have to be here cause is necessary to remove placeholder before complete call.
                        state.isDragged = false;

                        if( setting.maxLevels !== false )  // Has to be after placeholder remove.
                        {
                            recountLevels( cEl.el );
                            if( placeholderParentLi ) recountLevels( placeholderParentLi );
                        }
                    });
                }
                else
                {
                    state.placeholderNode.remove();
                    tidyEmptyLists();
                    setting.complete( cEl.el );
                    state.isDragged = false;
                }

            } );

        scrollStop( state );

        state.doc
            .unbind( "mousemove", dragging )
            .unbind( "mouseup", endDrag );

    }

    ....
在这里,我为代码中的所有方法制作了一个转储示例。看看enddragggggggggggggggggggggggggggggggggggggggggggggggggggggg日志的延迟。我还在Opera浏览器中检查了这个问题,它没有问题


编辑:我认为问题在于animate调用中闭包中的局部变量。变量占位符节点、变量占位符父节点和变量占位符父节点。当我将其重写为全局状态时,对象问题消失了。

我认为问题在于animate调用中闭包中的局部变量。变量占位符节点、变量占位符父节点和变量占位符父节点。当我将其重写为全局状态时,对象问题似乎不那么明显。但我不确定这是否是问题的根源。

使用promise或async/await使其同步。 下面的链接包含有关异步的文档。
一个经典的用户点击会触发
mousedown
mouseup
。 两者之间的时间通常在~50ms之间。 在这么短的时间内,浏览器可能会因为mousedown和事件冒泡和传播触发的进程而忙碌,特别是如果您在DOM树中绑定了太多的处理程序,比如
文档
html,body”
。避免这样

而且,
mouseup
可能永远不会被注册。
如果某些进程占用了太多时间,或者您的鼠标太快,则触发时,
mouseup
可能不在目标元素上方,因此,永远不会触发该事件。

我现在无法将所有代码重写为异步。我想知道如果所有的方法都完成了,但是mouseup在等待什么,会发生什么。我测试了这个实例,但无法重现错误:只要(从人的感知角度)我松开鼠标按钮,
enddragggggg
消息就会出现在控制台中。是否有一个特定的测试用例来重现错误,或者您只是简单地将所述变量重写为全局状态对象来解决它?顺便说一句格拉茨!很不错的!嗯,看来这是我浏览器的问题。好。谢谢。我可以确认,Mac OST上的最新Chrome没有问题。这不是问题。很好的解释,但这对我来说不是解决办法。你能给我举一些“永远不要触发那个事件”的例子吗?我从没听说过。JS中的所有内容都在队列中…@chamo,例如,如果您删除mousedown上的元素?…这是有意义的。但这与此无关。