javascript - 在 if/else if 的函数范围内未正确设置值

Question

我正在尝试回顾一些jquery。我编写了一个简单的函数来计算我将鼠标悬停在元素上的时间。

我的目的是从我进入该功能的时间中减去我离开该功能的时间。

但是，我在 if 语句中设置的鼠标输入值在 else if block 中返回为零。我将函数顶部的值设置为初始值 0。该值在运行 if 语句时发生变化，但一旦到达函数的 else if 部分，该值将返回到其初始值。

下面是我的函数

$('.navbar').bind('mouseenter mouseleave', function(evt) {
        var mouseenterTime = 0;
        var currentTime = new Date();
        var mouseoverTime;
        if(evt.type === 'mouseenter') {
            mouseenterTime = currentTime.getTime();
        }
        else if (evt.type === 'mouseleave') {
            mouseoverTime =currentTime.getTime(); 
            console.log('enter in else if',mouseenterTime); //0
            console.log('leave', mouseoverTime);
            var time = mouseoverTime - mouseenterTime;
        }
    console.log('mouseenterTime',mouseenterTime); //initial time then 0

    })

任何方向或更正将不胜感激。

Answer 1

您正在声明局部变量，该变量将在每次调用回调时创建，即在 mouseenter 和 mouseleave 上，因此每次您都会引用新变量而不是先前的变量。

您可以使用共享变量来解决这个问题，例如

var enteredTime = 0;
$('.navbar').hover(function(evt) {
  enteredTime = new Date();
}, function() {
  var ctime = new Date();
  var time = ctime.getTime() - enteredTime.getTime();
  snippet.log('time spend ' + time + 'ms')
})

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar">navbar</div>