- 此问题在此处已有答案**：
Callback function - use of parentheses（4个答案）
20小时前关门了。
这两种方法的区别是什么：
- 方法1**
function main() {
$setBtn.click(check());
}对比
- 方法二**
function main() {
$setBtn.click(()=>{
check();
});
}我只能运行方法2，而不能运行方法1。
- 这是我的js代码：**
function main() {
$setBtn.click(check());
}
function check() {
if (!localStorage.getItem('name1')) {
initStorage();
} else {
setStorage();
}
}
function setStorage() {
// they are <input> tag with id in html
localStorage.setItem('name1', document.querySelector('#name1').value);
localStorage.setItem('name2', document.getElementById('name2').value);
localStorage.setItem('timeset', document.getElementById('timeset').value);
}
function initStorage() {
localStorage.setItem('name1', 'Player1');
localStorage.setItem('name2', 'Player2');
localStorage.setItem('timeset', '60');
}- HTML代码：**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KOF</title>
<link rel="stylesheet" href="/static/css/base.css">
<script src="jquery here"></script>
</head>
<body>
<div class="input">
<form action="">
<label for="name1">First Player Name</label>
<input required type="text" maxlength="10" id="name1">
<label for="name2">Second Player Name</label>
<input required type="text" maxlength="10" id="name2">
<label for="timeset">Time Needed</label>
<input required type="number" min="3" max="999" size="20" name="time" id="timeset">
<br>
<button id="set">SET</button>
</form>
</div>
<script type="module">
import { main } from "/static/js/base.js"
main();
</script>
</body>
</html>
1条答案
按热度按时间jq6vz3qz1#
不同之处在于，在第一个方法中，您尝试在参数中调用给定的函数
check，因为您在末尾提供了圆括号。您喜欢的正确调用如下所示，因为您只想在click-事件发生时执行它，而不是立即执行。click-函数只需要一个函数句柄/引用（不带括号的函数名）来知道当事件出现时要做什么，而不是一个函数调用（带括号）。第二个方法定义了一个匿名函数（但不调用），但没有立即调用它，因此这种方法是有效的。然而，如果一个函数只调用另一个函数，而没有任何额外的好处，那么它就有点多余了。所以使用第一个（更正后的）版本。