Jquery: hiệu ứng mousedown (trong khi nhấp chuột trái được tổ chức xuống)

Question

Tôi cần một hàm để thực thi một hàm trong khi một nút được nhấn và dừng thực hiện khi nút được buông

$('#button').--while being held down--(function() { 
    //execute continuously 
}); 

Answer 1

Tôi tin rằng một cái gì đó như thế này sẽ công việc:

var timeout, clicker = $('#clicker'); 

clicker.mousedown(function(){ 
    timeout = setInterval(function(){ 
     // Do something continuously 
    }, 500); 

    return false; 
}); 

$(document).mouseup(function(){ 
    clearInterval(timeout); 
    return false; 
}); 

Xem demo này: http://jsfiddle.net/8FmRd/

Answer 2

Một thay đổi nhỏ để câu trả lời ban đầu:

$('#Clicker').mousedown(function() { 
    //do something here 
    timeout = setInterval(function() { 
     //do same thing here again 
    }, 500); 

    return false; 
}); 
$('#Clicker').mouseup(function() { 
    clearInterval(timeout); 
    return false; 
}); 
$('#Clicker').mouseout(function() { 
    clearInterval(timeout); 
    return false; 
}); 

Khi sự kiện di chuột trên nhấp chuột dừng khi bạn di chuyển chuột ra khỏi vùng nhấp chuột.

Lý do tôi đề xuất làm điều tương tự hai lần là có hiệu ứng mượt mà hơn. Nếu bạn không làm điều đó một lần trước khi thời gian chờ được thiết lập nó sẽ là một sự chậm trễ, trong trường hợp này, 500ms trước khi một cái gì đó xảy ra.

Answer 3

$.fn.click2=function(cb,interval){ 
    var timeout; 
    if(!interval) interval=100; 
    $(this).mousedown(function() { 
     var target=this; 
     timeout = setInterval(function(){ 
      cb.apply(target); 
     }, interval); 

    return false; 
    }).mouseup(function() { 
     clearInterval(timeout); 
     return false; 
    }).mouseout(function() { 
     clearInterval(timeout); 
     return false; 
    }); 
} 

Answer 4

Đây là triển khai JavaScript thuần túy về các giải pháp được cung cấp đã mở rộng hỗ trợ cho màn hình cảm ứng. Bạn cung cấp id, action để thực hiện (function(){}) và interval (ms) để lặp lại action. Lưu ý rằng việc triển khai này cũng sẽ thực thi ngay lập tức action, thay vì đợi interval mất hiệu lực.

// Configures an element to execute a function periodically whilst it holds the user's attention via a mouse press and hold. 
function assertPeriodicPress(id, action, interval) { 
    // Listen for the MouseDown event. 
    document.getElementById(id).addEventListener('mousedown', function(ev) { action(); timeout = setInterval(action, interval); return false; }, false); 
    // Listen for mouse up events. 
    document.getElementById(id).addEventListener('mouseup', function(ev) { clearInterval(timeout); return false; }, false); 
    // Listen out for touch end events. 
    document.getElementById(id).addEventListener('touchend', function(ev) { clearInterval(timeout); return false; }, false); 
}