Javascript 如何防止浏览器加载时启动JavasScript函数？

因此，我创建了一个函数（onSuccess），它在AJAX请求成功时启动。问题是，我的函数在浏览器加载时启动，我只希望在单击id为myButton的按钮时调用该函数。我正在使用

document.getElementById（“myButton”）查找我的按钮console.log（document.getElementById（“myButton”））时在我的浏览器控制台中，我得到一个空结果

我环顾四周，得到了一些建议，指出当我的脚本运行时，我的元素不在DOM中。我可以理解，但是当我移动脚本的位置并移动
document.getElementById…
时，我的脚本仍然无法工作。我查看了一些关于Stackoverflow的建议，但它们大多是JQuery解决方案。我正在寻找一个纯JavaScript解决方案。我的代码在下面


你犯了点小错误，但我想我知道你需要做什么

您希望将函数引用传递给
onclick
属性，但是您正在执行该函数并将
onclick
设置为该函数返回的任何值

这就是浏览器加载时函数运行的原因。你需要通过推荐信；不执行它并传递函数的输出

那你怎么解决呢？

函数式编程中有一个很酷的实践叫做。在这样的情况下，当您需要传入一些参数但希望延迟执行时，它非常有用。在这种情况下，您可以执行以下操作：

function buildAddUser(username, email, callback) { 
    return function() {
        addUser(username, email, callback)
    }
}

然后，将按钮设置为等于
buildAddUser
的输出

el.onclick = buildAddUser("username", "email", onSuccess);

这将设置
onclick
属性等于调用
addUser
函数的函数

为什么不直接使用匿名函数？

我更喜欢将这些东西包装在命名函数中，以使代码更易于阅读。到处都是匿名函数会让事情变得混乱

额外阅读

Javascript中的函数式编程是最令人兴奋的新发展之一，它提供了一系列工具来帮助解决类似的问题。你应该通读一遍，你这里有点不对劲，但我想我知道你需要做什么

您希望将函数引用传递给
onclick
属性，但是您正在执行该函数并将
onclick
设置为该函数返回的任何值

这就是浏览器加载时函数运行的原因。你需要通过推荐信；不执行它并传递函数的输出

那你怎么解决呢？

函数式编程中有一个很酷的实践叫做。在这样的情况下，当您需要传入一些参数但希望延迟执行时，它非常有用。在这种情况下，您可以执行以下操作：

function buildAddUser(username, email, callback) { 
    return function() {
        addUser(username, email, callback)
    }
}

然后，将按钮设置为等于
buildAddUser
的输出

el.onclick = buildAddUser("username", "email", onSuccess);

这将设置
onclick
属性等于调用
addUser
函数的函数

为什么不直接使用匿名函数？

我更喜欢将这些东西包装在命名函数中，以使代码更易于阅读。到处都是匿名函数会让事情变得混乱

额外阅读

Javascript中的函数式编程是最令人兴奋的新发展之一，它提供了一系列工具来帮助解决类似的问题。您应该有一个通读的
创建匿名函数调用来包装函数

el.onclick=function（）{addUser（“用户名”，“电子邮件”，onSuccess）；}

有关更详细的说明，请参考
创建匿名函数调用，该调用封装函数

el.onclick=function（）{addUser（“用户名”，“电子邮件”，onSuccess）；}

有关更详细的解释，您可以参考
问题在于，在尝试设置onClick侦听器时，您正在调用addUser。试试这个


var el=document.getElementById（“myButton”）；
el.onclick=函数（）{
var username=document.getElementById（“用户名”）.value；
var email=document.getElementById（“email”）.value
addUser（用户名、电子邮件、onSuccess）
}
函数onSuccess（结果）{
警报（“成功”）；
}
//请勿修改此功能。添加用户服务包装器。
函数addUser（用户名、电子邮件、回调）{
var xhr=new XMLHttpRequest（）；
var反应；
var success=（！！Math.round（Math.random（））；
如果（！成功）{
response=JSON.stringify({
成功：成功，
错误：“嗯，出了点问题！”
});
}否则{
response=JSON.stringify({
成功：成功，
用户：{
用户名：用户名，
电邮：电邮
}
});   
}
xhr.open（“POST”，“/echo/json/”；
xhr.onload=函数（）{
如果（xhr.status==200）{
回调（JSON.parse（xhr.responseText））；
}
}
xhr.send（“json=”+响应）；
};
添加用户：
添加用户
用户：
出错的地方是，当您尝试设置onClick侦听器时，您正在调用addUser。试试这个


var el=document.getElementById（“myButton”）；
el.onclick=函数（）{
var username=document.getElementById（“用户名”）.value；
var email=document.getElementById（“email”）.value
addUser（用户名、电子邮件、onSuccess）
}
函数onSuccess（结果）{
警报（“成功”）；
}
//请勿修改此功能。添加用户服务包装器。
函数addUser（用户名、电子邮件、回调）{
var xhr=new XMLHttpRequest（）；
var反应；
变量成功=（！！数学圆（Mat