创建一个 jquery 秒表，该秒表在用户焦点时开始，在焦点移出时停止并开始新的计时器

Question

我正在构建一个简单的网络应用程序，允许用户自我测验数学问题。用户首先选择她想要做的问题类型，然后选择她想要做的问题数量。

当用户解决问题时，我想计算完成每个问题所需的时间。这是在页面上显示问题的代码：

function displayMult ($i)
{
echo '<table class="basic">';
    for($k=0; $k < $i; ++$k) // display problems
    {
        $user_response[$k] = 'user_response' . $k ;
        echo '<tr>';
        echo '<td>' . number_format($_SESSION['mult_one'][$k]) . '</td>';
        echo '<td>'. ' x ' . '</td>';
        echo '<td>' . number_format($_SESSION['mult_two'][$k]) . '</td>';
        echo '<td>' . ' =   <input type="text" class="field" name="user_response' . $k . '"' . 'id="u_r' . $k . '" />' . '</td>';
        echo '<td id="timer_' . $k . '">test</td>';
        echo '</tr>';
    }
echo '</table>';
}

这是我对用户响应进行计时的 jQuery。我遇到的问题是 1) 我无法找到一种写入方法来始终选择正确的计时器 ID 传递到秒表功能中，以及 2) 停止旧计时器并开始新计时器。当前代码只会对第一个问题进行计时，然后当用户单击下一个问题的输入字段时正确停止计时器。

$(document).ready(function() {
    $('.field').focus(stopwatch('#timer_0'));
});

function stopwatch(container) {
  var interval;
  return function() {
    if (interval) {
       clearInterval(interval); 
    }
    else{
        var count = 0;
        interval = setInterval(function() {
            count++;
            $(container).html(count + ' seconds');
        }, 1000);
    }
  };
}

我是 jquery 新手，因此任何帮助和见解将不胜感激！提前致谢。

Answer 1

这里是我的尝试

var timer_id;

$(document).ready(function() {
    $('.field').focus(function() {
        $(this).addClass('active_input');
        timer_id = setInterval('tick()', 1000);
    }).blur(function() {
        $(this).removeClass('active_input');
        clearTimeout(timer_id);
    });
});

function tick() {
    var id_n = $('.active_input').attr('id').substring(3);
    var t_td = $('#timer_' + id_n);
    var t = parseInt(t_td.text(), 10);
    if (isNaN(t)) {
        t = '1 second';
    } else {
        t++;
        t += ' seconds'
    }
    t_td.text(t);
}

Answer 2

第 1 部分：
您可能想要做的不是在秒表中返回函数，而是在 focus() 调用中放置一个内联函数，该函数从字段中获取有关应发送到哪个计时器的一些信息。如果您至少使用 jQuery 1.5，则可以在 HTML 中设置一个属性，您可以使用 jquery .data() 方法检索该属性。

第 2 部分：
您在这里遇到的问题是，当您稍后调用计数和间隔句柄时，它们不在正确的范围内。实际上，您可以完全不间隔地执行此操作，只需再次使用 .data() 在计时器元素上存储开始时间，然后将处理程序附加到每个字段的模糊事件以停止它并显示结果。

这是 PHP：

function displayMult ($i)
{
echo '<table class="basic">';
    for($k=0; $k < $i; ++$k) // display problems
    {
        $user_response[$k] = 'user_response' . $k ;
        echo '<tr>';
        echo '<td>' . number_format($_SESSION['mult_one'][$k]) . '</td>';
        echo '<td>'. ' x ' . '</td>';
        echo '<td>' . number_format($_SESSION['mult_two'][$k]) . '</td>';
        echo '<td>' . ' =   <input data-timer="#timer_' . $k . '" type="text" class="field" name="user_response' . $k . '"' . 'id="u_r' . $k . '" />' . '</td>';
        echo '<td id="timer_' . $k . '">test</td>';
        echo '</tr>';
    }
echo '</table>';
}

这是 JS：

$(document).ready(function() {
    $('.field').focus(function() {
        var timer_id = $(this).data("timer");
        stopwatch("#" + timer_id);
    });
    $('.field').blur(function() {
        var timer_id = $(this).data("timer");
        stopwatch("#" + timer_id);
    });
});

function stopwatch(container_id) {
  var $container = $(container_id);
  var time_now = new Date();
  var time_started = $container.data("time");
  if (time_started) {
    time_taken = time_now - time_started; // This is in milliseconds
    $container.html(time_taken / 1000 + ' seconds');
  }
  else {
    $container.data("time", time_now);
  }
}