Question

关于jquery如何处理嵌套函数（有些我无法入睡但它已经到达那里），有一些事情让我真的很麻烦我希望jquery专家可以解释一下如何工作我心里想。

假设您有以下HTML代码：

<button id="first">click me first</button>
<button id="second">click me next</button>

以下jquery代码：

$(document).ready(function() {
    $('#first').click(function() {
        $('#second').click(function() {
            alert('test');
        });
    });
});

如果单击first按钮，然后单击second按钮，将弹出一个对话框。

我理解jquery在DOM准备好时实例化$('#first').click()函数，并在有人点击first按钮时调用它。

但令我困惑的是以下内容：
[Q1]是$('#second').click()函数还是在DOM就绪时实例化还是仅在调用$('#one').click()时实现？

现在，当您查看jQuery代码时，$('#first').click()函数中没有“保留我们”，即用户点击first按钮后{{1}函数应该被实例化，我们应该立即退出$('#second').click()函数。但是，在单击$('#one').click()按钮后，如果用户单击first按钮，jquery必须以某种方式将$('#second').click()无限期保留在内存中。

[Q2]在点击second按钮后用户点击$('#second').click()按钮之前，jquery如何知道将second功能保留在内存中？

最后，假设您要修改代码，以便用户在单击first按钮后10秒内单击second按钮，以显示对话框：

[Q3]你将如何实现这一点，以便jQuery知道在10秒后停止在first按钮上侦听点击事件？

Answer 1

Q1 - JS只会加载函数定义。除非明确触发/调用它，否则它不会运行它。在这种情况下，它只是将事件处理程序附加到#first并等到有人单击按钮来触发事件。这将使第二个功能自身附加到第二个按钮。

Q2 再次，它不是jQuery，它是JavaScript完成所有工作。该方法只是附加到DOM元素，并在附加到它的事件上触发。 JS就像任何编程语言一样，将所有方法和变量保存在其内存中。

第二次点击功能实际上并未附加到第二个按钮，直到有人点击第一个按钮。这是因为，当单击第一个按钮时，JS知道触发第一个方法，该方法完成将第二个方法附加到第二个按钮的所有工作。

Q3 您可以使用setTimeout从DOM元素取消绑定该方法。

$(document).ready(function() {
    $('#first').click(function() {
        $('#second').click(function() {
            alert('test');
            setTimeout(function(){$('#second').unbind('click');}, 10000);
        });
    });
});

注意这解除了来自此DOM元素的所有点击事件处理程序。您还可以通过将其作为参数传递来取消绑定该特定方法。查看API文档以了解用法。

setTimeout：https://developer.mozilla.org/en/DOM/window.setTimeout

取消绑定：http://api.jquery.com/unbind/

Answer 2

[A1] 第二个函数仅在单击#first时实例化，因为它是第一个方法执行的一部分。这也意味着，如果您点击#first n 次，则每次点击#second时都会收到 n 提醒。

[A2] 该功能以#second元素为根。只要该元素是活着的，javascript就知道要保持这个功能。

[A3] 您需要保存功能指针并执行setTimeout清除它。

$(document).ready(function() {
    $('#first').click(function() {
        var secondFunction = function() {
            alert('test');
        };
        $('#second').click(secondFunction);
        setTimeout(function(){ $('#second').unbind('click', secondFunction); }, 10000);
    });
});

更好的实现可能类似于：

$(document).ready(function() {
    var enabled = false;
    $('#first').click(function() {
        enabled = true;
        setTimeout(function(){ enabled = false; }, 10000);
    });
    $('#second').click(function() {
        if(enabled) {
            alert('test');
        };
    });
});

Answer 3

第一个问题的答案：是的，只有当用户点击第一个按钮时，第二个按钮才会绑定到点击事件。

第二个问题：我不确定你在问什么。

第三个：假设按钮1无关，除了一旦单击将事件绑定到第二个按钮，您可以将文档的超时设置为10秒。现在，当计时器到期时，它必须取消绑定按钮的单击事件，从而阻止第二个按钮的事件。我猜你现在明白了。 e.g。

$(document).ready(function(){
   setTimeout(removeEvent, 10000);
   $('#first').click(function() {
        $('#second').click(function() {
            alert('test');
        });
    });
});
function removeEvent(){
   $('#first').unbind('click');
}

jquery如何处理嵌套函数和事件的时间？

3 个答案: