JavaScript関数を呼び出す保留ボタンを実装するにはどうすればよいですか？

Question

ボタンを実装する必要があります.5秒間クリックするとJavaScript関数が呼び出され、ボタンを離すと呼び出しがキャンセルされます。どうやってやるの？

このような何か：ここ

Answer 1

は、あなたが5秒間ボタンを押し続けた場合にアラートを生成しますが、場合に警告を呼び出すことはありませんjsfiddleです5秒以上経過する前にボタンを離します。 これは、ボタンをクリックするとタイムアウトを設定することによって行われますが、ボタンを離すとタイムアウトをクリアします。 （jqueryのを使用しています）あなたがこれまでに試してみました何

https://jsfiddle.net/ehozjeLn/1/

<div> 
    <input id="btnTesting" type="button" value="test" /> 
</div> 

$('#btnTesting').mousedown(function(){ 
     myTimeout = setTimeout(function(){ alert("Hello"); }, 5000); 
}); 

$('#btnTesting').mouseup(function(){ 
    clearTimeout(myTimeout); 
}); 

Answer 2

var Handler = function() { 
 
     // create a function which sets an action to handle in 5 seconds. 
 
     this.clickHandler = function() { 
 
      var self = this; 
 
      this.timerId = setTimeout(function() { 
 
       console.log('fired!!!!'); 
 
       self.timerId = null; 
 
       // do whatever here. 
 
      },5000) 
 
     }; 
 
     
 
     //creat a function which will cancel the previously scheduled task. 
 
     this.cancelHandler = function() { 
 
      // fire cancel logic if needed 
 
      if (this.timerId) { 
 
       console.log('cancelling'); 
 
       clearTimeout(this.timerId); 
 
      } 
 
     } 
 
    } 
 

 

 
    
 
var h = new Handler(); 
 

 
//find an element to attach the event to. 
 
var button = document.querySelector('button'); 
 

 
//wire up your event handlers to your element 
 
button.addEventListener('mousedown', h.clickHandler.bind(h)); 
 

 
button.addEventListener('mouseup', h.cancelHandler.bind(h));

<button>Click Me</button>