JQuery - решить, находится ли пользователь "в гостях"

Question

я делаю небольшой тест, чтобы проверить, находится ли пользователь "в отъезде" (неактивен) или нет;

function away_status(){
    $("#away_stat_update").everyTime(1000, function(i) { 
        var number = Number($(this).html());
        if( number == 20 ) {
            // set user as away 
            alert( "user away" );
        }
        if( number > 20 ) {
            $("*").mousemove(function(e){
                $("#away_stat_update").html(0);
                var number = Number(0);
                // reset user to being online
                alert( "user back online" );
            });
        }
        $("#away_stat_update").html( number + 1 );
    });
    $("*").mousemove(function(e){
        $("#away_stat_update").html(0);
    });
}
away_status();

единственная проблема заключается в том, что когда число больше 20 и мышь перемещается, она продолжает предупреждать «пользователь снова в сети», а не делать это только один раз. Кстати, номер сбрасывается.

Answer 1

Я отвечаю на это немного по-другому - так как я думаю, что всегда приятно решить проблему изящно и с максимально кратким кодом.

Этот пример делает именно то, что вы хотите, полностью работает. Он не записывает число в DOM, он хранит его в памяти в JavaScript - вы можете записать его в элемент, если хотите отобразить число, но это избавляет от необходимости извлекать его каждый раз.

Предупреждения также работают, как вы описали.

var number = 0;
var timer;

function handle_mouse_move() {
    if (number > 20) {
        alert("User back online, was away for approx " + number + " seconds");
    }
    number = 0;
}

function handle_timer() {
    if (number === 20) {
        alert("User away");
    }
    number++;
    timer = window.setTimeout(function() { handle_timer(); }, 1000);
}

$(document).ready(function() {
    timer = window.setTimeout(function() { handle_timer(); }, 1000);

    $("*").mousemove(function(e){
        handle_mouse_move();
    });
});

Answer 2

$("*").mousemove(function(e){
    // ...
});

Это назначит обработчик события событию mousemove, которое будет оставаться там до тех пор, пока вы его не удалите.

Answer 3

Похоже, что вы добавляете событие mousemove каждый раз, когда выполняется функция обратного вызова, то есть каждую секунду.

function away_status(){
    $("#away_stat_update").everyTime(1000, function(i) { 
        var number = Number($(this).html());
        if( number == 20 ) {
            // set user as away 
            alert( "user away" );
        }
        $("#away_stat_update").html( number + 1 );
    });
}
away_status();

$("*").mousemove(function(e){
    $("#away_stat_update").html(0);
    alert( "user back online" );
});

Таким образом, вы устанавливаете событие mousemove только один раз, и нет необходимости его отменять. Обратите внимание, что при каждом перемещении мыши номер сбрасывается, он не ждет, пока число> 20.

Answer 4

Вы присоединяете несколько событий mousemove дважды одним и тем же способом, который не поможет, поэтому каждый раз, когда истекает таймер, вы подключаете два новых обработчика событий. Объедините и переместите код события mousemove и переместите его из метода away_status ().

Что касается сброса, в первом изменении обработчика события мышиных движений:

var number = Number(0);

до

number = Number(0); // or just = 0;

Обратите внимание, мы удалили var ... похоже, это проблема с областью видимости.