Question

我有一个功能，用户排序＆＃34;刮擦＆＃34;当他将鼠标拖到它上面时，表面上的内容会受到谴责。我想计算他拖动鼠标的秒数，当他达到5秒时 - 做点什么。如果他放开，例如，3秒后，计数应该停止，并在他继续拖动时从3d秒恢复。我尝试用setInterval做到这一点，并且每1000毫秒添加1到秒计数器，但无论我尝试过什么 - 我要么在柜台上得到一些疯狂的数字，要么只是留在这是我的代码：

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。

以下是一个例子：

<强> EDITED

$(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"; 
}

计算用户拖动鼠标的秒数

1 个答案: