Javascript jquery如何处理嵌套函数和事件计时？

关于jquery如何处理嵌套函数，有几件事真的让我很困扰（不是说我睡不着，但它已经开始了），我希望jquery专家能解释一下这些事情是如何工作的，让我头脑清醒

假设您有以下HTML代码：

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

如果先单击

第一个

按钮，然后单击

第二个

按钮，将弹出一个对话框

我知道jquery实例化了

$（'#first'）。当DOM就绪时单击（）

函数，当有人单击

first

按钮时调用它

然而，我感到困惑的是：
[Q1]是

$（'#秒'）。click（）

函数也在DOM ready上实例化，或者仅在调用

$（'#秒'）时实例化。click（）

？

现在，当您查看jQuery代码时，在

$（'#first'）函数中没有任何“留住我们”的东西。单击（）

函数，即一旦用户单击

first

按钮，

$（'#second'）。单击（）

函数应该被实例化，我们应该立即退出

$（'#one'）。单击（）

函数。但是，在单击第一个按钮后，jquery必须以某种方式将$（“#second”）保留在内存中。如果用户单击第二个按钮，请无限期地单击（）

[Q2]jquery如何知道将

$（“#second”）保留在内存中。单击（）

函数，直到用户在单击

第一个按钮后单击
第二个按钮？

最后，假设您希望修改代码，以便用户必须在单击第一个按钮的10秒内单击第二个按钮，对话框才会出现：

[Q3]您将如何实现这一点，以便jQuery知道在10秒后停止侦听
秒
按钮上的单击事件？[A1]第二个函数仅在单击
第一个
时实例化，因为它是第一个方法执行的一部分。这也意味着，如果您先点击
#n次，则每次点击
#第二次
，都会收到n条警报

[A2]该函数由
#第二个
元素作为根。只要该元素是活动的，javascript就知道如何保持函数

[A3]您需要保存函数指针，然后执行
设置超时
以清除它

$(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');
        };
    });
});

Q1-JS将只加载函数定义。除非它们被显式触发/调用，否则它不会运行它。在这种情况下，它只需先将事件处理程序附加到#，然后等待有人单击按钮触发事件。这将使第二个功能附加到第二个按钮上

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文档以了解用法

设置超时：

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

第二个问题：我不知道你在问什么

第三个：假设按钮1除了在单击后将事件绑定到第二个按钮之外无事可做，您可以在DocumentReady上设置10秒的超时。现在，当计时器过期时，它必须解除按钮一的单击事件的绑定，从而阻止第二个按钮的事件。我想你现在明白了。e、 g

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

我想指出，您的问题与jQuery完全无关，只是您使用了jQuery作为示例。这是javascript的工作方式，而不是jquery。有趣的是，javascript是您应该添加的最重要的标记……只有一件事，
unbind
thingy只适用于jQuery。javascript中无法删除事件侦听器。jQuery将事件侦听器添加到原生JS侦听器中，并使用它调用通过
添加的内容。单击（func）
。解除绑定时，实际上是将其从jQuery中删除，而不是从本机事件中删除
native\u eventjquery\u handlerreal\u handler\u handlers
@Christian可能是，我对JS内部结构一点也不在行。但是关于
removeEventListner
，这里讨论的是：关于您的代码块，它不会在10秒后解除第二个事件处理程序的绑定。
$(document).ready(function(){
   setTimeout(removeEvent, 10000);
   $('#first').click(function() {
        $('#second').click(function() {
            alert('test');
        });
    });
});
function removeEvent(){
   $('#first').unbind('click');
}