Question

我正在尝试审查一些jquery。我写了一个简单的函数，它应该计算我在一个元素上悬停的时间。

我的意图是从我输入函数时减去离开函数的时间。

但是，我在if语句中设置的鼠标输入值在else if块中返回零。我将函数顶部的值设置为初始值为0.当值通过if语句时，值会发生变化，但是一旦遇到else，如果我的函数的一部分值返回到它的初始值。

以下是我的功能

$('.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上创建，因此每次您将引用一个新变量而不是前一个变量。

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

＆＃13;

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')
})

＆＃13;

<!-- 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>

＆＃13;

Answer 2

那是因为它在每次调用时都在本地定义，如果else if部分被运行，那意味着if部分不是，因此它为什么会这样做叫else if。因此，如果第一个if语句没有运行，则永远不会更改该值。

var mouseenterTime = 0; // defined
var currentTime = new Date();
var mouseoverTime;
if(evt.type === 'mouseenter') {
    // This part is not ran, so it doesn't matter
}
else if (evt.type === 'mouseleave') {
    // mouseenterTime wasn't changed so it's still 0
}

一个基本的解决方案是让mouseenterTime更加全局化，基本上将var mouseenterTime = 0;放在函数之外。

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

2 个答案: