封装在函数中的 JavaScript 事件监听器

Question

我有一个函数中的事件监听器。监听器和发射器都在同一个函数中。

当事件触发时，变量会增加。到目前为止，一切都很好。但是当我多次调用该函数时，在同一个函数调用中多次触发监听器。

var test = function() {    
    var completeStatus = 0;

    $(document).on('gt', function() {
        console.log(++completeStatus);
    });
    $(document).trigger('gt');
}

test();
test();
test();

它期望它输出 1 3 次，因为该函数被调用了 3 次。但它输出:

0
1
0
2
1

为什么会这样以及如何获得所需的行为？

这是一个 jsfiddle尝试一下。

Answer 1

因为你正在使用 $(document).trigger('gt');所以它在所有文档事件中启动触发事件，这就是为什么增加函数返回输出的调用，如

0       //from first function call
1 0     //from second function call 
2 1 0   //frm third function call
.... and so on

解决方案:

var test = function() {    
    var completeStatus = 0;
    var pageInitialized = false;    
    $(document).on('gt', function() {
        if(pageInitialized) return;
        console.log(++completeStatus);
        pageInitialized = true;
    });
    $(document).trigger('gt');
}

test();
test();
test();