javascript - 如果我使用函数参数而不是固定值，为什么这会有所不同？

Question

我开始使用 JQuery 和 Javascript 并进行视差滚动练习，我遇到了一个问题。

• 我在 <p></p> 中写了一个 var 的值每次用户滚动时。

• 该值是滚动位置的值与另一个值之间的运算结果。

• 如果我将这个最后一个值作为函数中的固定数字，它会起作用，并且每次我使用滚动条时数字都会改变，但是如果我将这个值作为函数中的参数，函数只计算卷轴的第一个 Action 并将结果放入 <p></p> .

这是两个代码:

1. <p></p> 中的数字每次我移动滚动条都会改变

   $(window).on("scroll", parallax);    
   function parallax(){
   var scrollSize=$(window).scrollTop();
   var scrollParallax=Number(scrollSize*0.5);
   $("p").text(scrollParallax);
   }
   

2. <p></p> 中的数字不改变，只显示变量的第一个值

   $(window).on("scroll", parallax(0.5));
   function parallax(medida){
   var scrollSize=$(window).scrollTop();
   var scrollParallax=Number(scrollSize*medida);
   $("p").text(scrollParallax);
   }
   

有什么区别？

为什么会这样？

Answer 1

这是因为.on()需要处理程序参数的函数名称或函数定义。

.on( events [, selector ] [, data ], handler )

在启动时，Javascript 正在执行 parallax(0.5) 以找到它需要调用的函数。它没有找到函数，因此它现在处于错误状态并且该事件永远不会触发。

请查看下面我的代码片段中的不同之处。

• function 使用 parallax 并且有效，
• Function Result 使用 parallax(0.5) 并且不起作用

$('#eventBtn').on("click", parallax);
$('#resBtn').on("click", parallax(0.5));
function parallax(medida){
alert('parallax ran' + medida)
$("p").text(new Date().getTime());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text</p>
<button id="eventBtn" type="button">Function</button>
<button id="resBtn" type="button">Function Result</button>