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

Question

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

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

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

• 如果我将最后一个值作为函数中的固定数字，它会起作用，并且每次使用滚动条时数字都会发生变化，但是如果我将这个值作为函数中的参数，则该函数仅计算滚动的第一次移动并将结果放入 <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 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>