[Javascript] click & dbclick 實作與 setTimeout ?

今天因為一個實作需要把 click 和 dblclick 事件綁定到同一個 element 記得印象中在看[jQuery開發範例大全] 一書時上面說如果無法避免以不同的方式來回應單擊和雙擊那麼就應該用 click 處理常式來模擬 dblclick 。不寫沒事，一寫下去相關問題就跑出來。首先，我在 StackOverFlow 找到這篇答案。底下這段程式碼的的確確解決了問題，但我無法清楚的理解他。所以開始了以下這篇解說：

var clickTimeout = false;
$('#element').click(function() {

   if(clickTimeout !== false) {
       // I'm doubleclick!
       clearTimeout(clickTimeout);
       clickTimeout = false;
   } else {
       clickTimeout = setTimeout(function() {
           // I'm click!
           clickTimeout = false;
       }, 400);
   }
});

Q1 : 第一個無法理解的地方式我乍看之下找不到讓if(clickTimeout !== false)　有　true　的地方，到底是怎麼轉換和判斷 ?

為了理解到底 clickTimeout 這個變數是怎麼動作的在程式碼裡面加入

$('body').append('<div>clickTimeout = ' + clickTimeout + '</div>');

完整程式碼如下 :

var clickTimeout = false;

$('#test').click(function() {
//每一次點擊都輸出一次clickTimeout觀察

$('body').append('<div>clickTimeout = ' + clickTimeout + '</div>');
if(clickTimeout !== false) {

// I'm doubleclick!

clearTimeout(clickTimeout);

$('a').text('I\'m doubleclick!'); // 測試改變物件

console.log(clickTimeout); // Firebug檢測變數

clickTimeout = false;

} else {

clickTimeout = setTimeout(function() {

// I'm click!

$('a').text('I\'m click!');

console.log(clickTimeout);

clickTimeout = false;

}, 400);

}

});

然後發現在FireFox,Chrome,IE裡面都得到不太一樣的 ID 值，下面是輸出的結果瀏覽器為 Chrome

clickTimeout = false
clickTimeout = false
clickTimeout = 2
clickTimeout = false
clickTimeout = 3
clickTimeout = false
clickTimeout = false
clickTimeout = false
clickTimeout = false
clickTimeout = false
clickTimeout = 8

在尋求大神的協助之下發現 The return value is an ID that can be used by cancelTimeout()to cancel the operation. 這段解釋。

也就是說這段程式碼打從一開始就不需要把clickTimeout　特地修改變成　true。而是透過　!== 不恆等於(值和型別都要比較)　，來輕易的讓if(clickTimeout !== false) 判斷的結軌產生　true

總結整個流程 :
1. 點擊第一下 clickTimeout 變數為 false , false !== false # 傳回 false 所以判斷式移至else block.