javascript - jquery停止双重事件

Question

我遇到一个问题，无法防止双重事件

所以首先我有一段触发的代码

jQuery(window).trigger('swipeForward');

所以这会监听这个触发器

jQuery(window).on('swipeForward', swipeHandlerNext );

滑动处理程序的想法是让用户无法滑动两次并创建双事件

这将执行 swipeHandlerNext 函数

function swipeHandlerNext(event) {

    // If event isn't already marked as handled, handle it
    if(event.handled !== true) {

        // Kill event handler, preventing any more clicks
        jQuery(".pageSize").off("swipeForward");

        // Do your stuff here
        pageSize = jQuery(".mainHeader").width();
        slide("forward", pageSize);

        console.log(" swipe complete page forward via swipe");

        // Mark event as handled
        event.handled = true;
    } 

    return false;
}

这显然执行了幻灯片功能。这是有 .animate 命令的那个

function slide(data, pageSize) {


    if (!pageSize) {
    pageSize = jQuery(".mainHeader").width();
    }

    var promise  = calcLeft(data, pageSize);


    jQuery.when(promise).then(function(result) {

        console.log(result);

        jQuery('#pageHolder').delay(500).animate({
            left: result

          }, 400, function() {
            console.log("animation started");
            calcNav(pageSize);
            calcPage(pageSize);
            jQuery(".pageSize").on("swipeForward", swipeHandlerNext);
            console.log("animation complete");

        });


    });

}

但是它并不能阻止双滑动。

感谢您的帮助

Answer 1

为什么 Off()在您的示例中不起作用

jQuery 的 off()方法期望选择器 match the one originally passed to .on() when attaching event handlers .

在初始事件绑定(bind)中，您将事件附加到 window元素为 jQuery(window).on(...) 。但在处理程序函数中，您要删除事件，然后将其重新附加到 .pageSize元素为 jQuery('.pageSize').off(...)和jQuery('.pageSize').on(...) .

换句话说，您实际上并没有删除绑定(bind)到 window 的事件处理程序。元素，以便用户可以继续滑动。

为什么 event.handled在您的示例中不起作用

每次发生滑动事件时，单独 event创建对象并将其传递给处理程序。所以event object 不是全局变量，您可以在后续滑动中修改并检查其状态。

按照您的示例可能的解决方案

1. 匹配传递给 on() 的选择器和off()方法。
2. 设置和取消设置全局变量以指示滑动正在进行。