Question

我有一个显示记录行的表。

目标是让用户将鼠标悬停在任何给定行上1秒钟，显示带有加载动画的弹出窗口，并使用有关该记录的各种信息加载弹出窗口。如果他们将鼠标移到另一个记录上，它将删除原始弹出窗口并重新启动该过程。

我遇到的问题是控制何时停止执行这些记录详细信息调用。如果我将鼠标悬停在前一个完整加载之前的各种记录上，当我最终停止移动鼠标时，弹出窗口会循环显示之前请求的所有记录。

理想情况下，我需要在鼠标离开记录行时停止执行。此外，执行应该停止，弹出窗口应该在单击记录行时隐藏，因为单击该行会执行其他操作。

到目前为止我的代码：

        var timeout;

        $("#tblQueueItems tr").mouseenter(function (cRow) {
            var cRowCopy = $(this);
            cRowCopy.addClass('hover');
            hideBox();
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                hideBox();
                var orderId = cRowCopy.attr('oid');
                showBox("<div id='divLoading'><img src='/images/AjaxLoader.gif' /></div>", RowCopy, cRow);
                $.get('/api/WorkQueue/GetWQIOrderModal', { orderId: orderId }, function (data) {
                    showBox(data, cRowCopy, cRow);
                });
            }, 1000);

            cRowCopy.mouseleave(function () {
                clearTimeout(timeout);
                cRowCopy.removeClass('hover');
            });

            cRowCopy.click(function () {
                clearTimeout(timeout);
                hideBox();
                cRowCopy.removeClass('hover');
            });

        });

        $("#divOrderPopup").mouseenter(function () {
            var orderId = $("[id^=hf_]").attr('id').split("_").pop();
            $("#tr_" + orderId).addClass('hover');
        });

        $("#divOrderPopupMoving").mouseleave(function () {
            var orderId = $("[id^=hf_]").attr('id').split("_").pop();
            $("#tr_" + wqiId).removeClass('hover');
            hideBox();
        });
    }

    function showBox(text, obj, e) {
        var left = (e.pageX + 25) + 'px';
        var top = (e.pageY - 200) + 'px';
        var node = "<div style=\"z-index: 25;background: #ffffff;width: 715px;padding: 10px;border: 2px solid black;\" id=\"popBox\">";
        node += text;
        node += "</div>";
        $("#divOrderPopup").css('position', 'absolute');
        $("#divOrderPopup").css('top', top);
        $("#divOrderPopup").css('left', left);
        $("#divOrderPopup").html(node);
    }

    function hideBox() {
        window.node = document.getElementById('popBox');
        $("#divOrderPopupMoving").html('');
        window.on = false;
    }

Answer 1

您需要将AJAX请求保存到变量，例如全局变量：

req =  $.get('/api/WorkQueue/GetWQIOrderModal', { orderId: orderId }, function (data) {
                    showBox(data, cRowCopy, cRow);
                });

并且在mouseleave上，您可以拨打req.abort()：

   $("#divOrderPopupMoving").mouseleave(function () {
        req.abort();
        var orderId = $("[id^=hf_]").attr('id').split("_").pop();
        $("#tr_" + wqiId).removeClass('hover');
        hideBox();
    });

我认为这是你的问题/问题到目前为止，因为你没有告诉我们你在哪里。

如何在动作时取消jquery执行

1 个答案: