如何使用fabricjs在一段時間後觸發鼠標：over事件？

Question

我只想在用戶將鼠標懸停在某個元素上超過特定設置間隔（例如200毫秒）時才觸發鼠標：over事件。

目前我已經使用了添加事件「瞬間」這個例子： http://fabricjs.com/hovering

是什麼觸發該事件之前增加一個延遲的最佳方式？

問候， 亞歷

Answer 1

在你的情況，我認爲你可以使用mouse:over處理器中setTimeout功能。這樣你可以在執行代碼之前放一些延遲。

所以我做了什麼：

1）使用setTimeout內mouse:over處理

2）保存參考啓動超時在var timeout;

3）timeout變量使用clearTimeout在mouse:out處理程序防止mouse:over中的代碼在延遲完全完成之前如果鼠標沒有被執行

(function() { 
 
    var canvas = this.__canvas = new fabric.Canvas('c'); 
 
    fabric.Object.prototype.transparentCorners = false; 
 
    
 
    var timeout; 
 
    canvas.on('mouse:over', function(e) { 
 
    if(!e.target) return false; 
 
    
 
    timeout = setTimeout(function(){ 
 
     e.target.setFill('red'); 
 
     canvas.renderAll(); 
 
    }, 1000) 
 
    }); 
 

 
    canvas.on('mouse:out', function(e) { 
 
    if(!e.target) return false; 
 
    
 
    /* clear the timeout so we make sure that mouse:over code will not execute if delay is not completed */ 
 
    clearTimeout(timeout); 
 
    
 
    e.target.setFill('green'); 
 
    canvas.renderAll(); 
 
    }); 
 

 
    // add random objects 
 
    for (var i = 15; i--;) { 
 
    var dim = fabric.util.getRandomInt(30, 60); 
 
    var klass = ['Rect', 'Triangle', 'Circle'][fabric.util.getRandomInt(0,2)]; 
 
    var options = { 
 
     top: fabric.util.getRandomInt(0, 300), 
 
     left: fabric.util.getRandomInt(0, 300), 
 
     fill: 'green' 
 
    }; 
 
    if (klass === 'Circle') { 
 
     options.radius = dim; 
 
    } 
 
    else { 
 
     options.width = dim; 
 
     options.height = dim; 
 
    } 
 
    canvas.add(new fabric[klass](options)); 
 
    } 
 
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.js"></script> 
 

 
<canvas id="c" width="300" height="300"></canvas>

我使用在此代碼段當前超時是1000毫秒= 1秒。您可以在setTimeout函數中調整它。我希望這對你有所幫助，如果有些事情不清楚，請告訴我。