javascript - 计算用户拖动鼠标的秒数

Question

我有一个功能，当用户将鼠标拖动到表面上时，用户会“抓取”表面，从而谩骂该表面下的内容。我想数一下他拖动鼠标多少秒，当他达到5秒时——做点什么。例如，如果他在 3 秒后松开，则计数应停止，并在他恢复拖动时从 3 秒开始恢复。我尝试使用 setInterval 来做到这一点，并每 1000 毫秒添加 1 到秒计数器，但无论我尝试了什么 - 我要么在计数器中得到一些疯狂的数字，要么它只是停留在 0 .这是我的代码:

var interval, info;
var totalSeconds = 0;

function init()
{
    ...more vars declaration and initialization

function scratchOff(x, y)
{
    mainctx.save();
    mainctx.beginPath();
    mainctx.arc(x,y,radius,0,Math.PI*2,false);
    mainctx.clip();
    mainctx.drawImage(bottomImage, 0, 0);
    mainctx.restore();
}

$('#overlay').mousedown(function(e){
        isMouseDown = true;
        var relX = e.pageX;
        var relY = e.pageY;
        scratchOff(relX, relY, true);
});

$('#overlay').mousemove(function(e){
    var relX = e.pageX;
    var relY = e.pageY;
    overlayctx.clearRect(0,0,canvasWidth,canvasHeight);
    overlayctx.drawImage(coinImage, relX-radius, relY-radius);
    if (isMouseDown) {
        scratchOff(relX, relY, false);
        countSeconds(); // - THIS CALLS FOR THE FUNCTION THAT IS SUPPOSED 
                        // TO COUNT SECONDS ONCE THE USER STARTS DRAGGING THE MOUSE
    }

});
$('#overlay').mouseup(function(e){
    isMouseDown = false;
    clearInterval(interval);
});

var mainctx = $('canvas')[0].getContext('2d');
var radius = 10;
topImage.onload = function(){
    mainctx.drawImage(topImage, 0, 0);
};
topImage.src = "images/oie_canvas.png"; 
}

// THIS IS THE FUNCTION THAT'S SUPPOSED TO COUNT SECONDS
function countSeconds() {
    interval = setInterval(function(){
        totalSeconds = totalSeconds++;
        info.innerHTML = totalSeconds;
        if(totalSeconds >= 5) clearInterval(interval);
    }, 1000);
}

我怎样才能让它发挥作用？

Answer 1

您将启动一个 1 秒的计时器，它监视您的 isMouseDown 标志并开始计数，当您达到 5 秒时，您就开始执行操作，无需每次都调用 countSeconds。

这是一个例子:

已编辑

$(function() {
    setInterval(function(){
    if(isMouseDown) { 
        totalSeconds++;
    }
    if(totalSeconds== 5) {
        //do your action;
        totalSeconds = 0;
    }
    info.innerHTML = totalSeconds;
}, 1000);
} );

var isMouseDown = false;

function init()
{

... your code
}

已编辑 2

完整示例

var topImage = new Image();
var bottomImage = new Image();
var coinImage = new Image();
bottomImage.src = "http://i58.tinypic.com/2i093ia.jpg";
coinImage.src = "http://i61.tinypic.com/30acmtt.png";   
var info;
var interval;
var totalSeconds = 0;

$(function() {
    setInterval(function(){
    if(isMouseDown) { 
        totalSeconds++;
    }
    if(totalSeconds== 5) {
        alert("5 sec");
        totalSeconds = 0;
    }
    info.innerHTML = totalSeconds;
}, 1000);
} );

var isMouseDown = false;

function init()
{

    var canvasWidth = $('#myCanvas').width();
    var canvasHeight = $('#myCanvas').height();
    $('body').append('<canvas id="overlay" width="'+canvasWidth+'" height="'+canvasHeight+'" />');
    var overlayctx = $('canvas')[1].getContext('2d');
    overlayctx.drawImage(coinImage, 0,0);
    info = document.getElementById('info');

    function scratchOff(x, y)
    {
        mainctx.save();
        mainctx.beginPath();
        mainctx.arc(x,y,radius,0,Math.PI*2,false);
        mainctx.clip();
        mainctx.drawImage(bottomImage, 0, 0);
        mainctx.restore();
    }

    $('#overlay').mousedown(function(e){
            isMouseDown = true;
            var relX = e.pageX;
            var relY = e.pageY;
            scratchOff(relX, relY, true);
    });
    $('#overlay').mousemove(function(e){
        var relX = e.pageX;
        var relY = e.pageY;
        overlayctx.clearRect(0,0,canvasWidth,canvasHeight);
        overlayctx.drawImage(coinImage, relX-radius, relY-radius);
        if (isMouseDown) {
            scratchOff(relX, relY, false);
            countSeconds();
        }

    });
    $('#overlay').mouseup(function(e){
        isMouseDown = false;
        clearInterval(interval);
    });

    var mainctx = $('canvas')[0].getContext('2d');
    var radius = 10;
    topImage.onload = function(){
        mainctx.drawImage(topImage, 0, 0);
    };
    topImage.src = "http://i61.tinypic.com/xpzbx0.png"; 
}