Создайте 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) я не могу найти способ написать, чтобы всегда выбирать правильный идентификатор таймера для передачи в функцию секундомера и 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);
  }
}