jQuery如何处理嵌套函数和事件定时

How does jQuery handle nested functions and timing of events?

本文关键字：函数 嵌套 事件 定时 处理 何处理 jQuery      更新时间：2023-09-26

关于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实例化$('#first').click()函数时，DOM准备好了，并调用它时，有人点击first按钮。

然而，令我困惑的是:
[Q1] $('#second').click()函数是否也在DOM上实例化，或者仅在调用$('#one').click()时实例化?

现在，当您查看jQuery代码时，没有什么东西可以让我们保持"在$('#first').click()函数中，即一旦用户点击first按钮，$('#second').click()函数应该被实例化，我们应该立即退出$('#one').click()函数。然而，在点击first按钮后，jquery必须以某种方式将$('#second').click()无限期地保存在内存中，以防用户点击second按钮。

[Q2] jquery如何知道保持$('#second').click()函数在内存中，直到用户点击first按钮后点击second按钮?

最后，假设您想修改代码，以便用户必须在单击first按钮后的10秒内单击second按钮才能出现对话框:

[Q3]你将如何实现这一点，使jQuery将知道停止监听点击事件在second按钮10秒后?

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/

[A1]第二个函数仅在单击#first时实例化，因为它是第一个方法执行的一部分。这也意味着，如果你点击#first n次，你应该得到n警报，每次点击#second。

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

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

第二个问题:I'm not sure you' s ask .

第三个:假设按钮除了在单击后将事件绑定到第二个按钮之外没有什么可做的，您可以在文档准备上设置一个10秒的超时。现在，当计时器到期时，它必须解除绑定按钮的点击事件，从而阻塞第二个按钮的事件。我想你现在明白了。例如

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