實時點擊/鏈接計數器

Question

我有了這個代碼...

<script> 
     $(document).ready(function(){ 
    var x = 0;  
    function resetcounter() { 
    x = 0; 
    document.getElementById("counting").value = x; 
    } 

    function count() { 
    if(x<50) 
    { 
     x += 1; 
    } 
    else 
    { 
     x=0; 
    } 
    document.getElementById("counting").value = x; 
    } 
    $('#btn').click(

     function() { 
     count(); 
    }); 

    $('#reset').click(

    function() { 
      resetcounter(); 
    }); 
}); 
</script> 

它的偉大工程。但我需要它來實時更新。我想使用Firebase。 如何將資訊提供到Firebase中？基本上我需要這個...每當有人點擊我網站上的某個按鈕時，計數器會跟蹤它被點擊的次數，並實時顯示給網頁上的每個人。

Answer 1

這裏的一般方法是將'x'變量移出到Firebase並使用它返回計數器的狀態。由於我們正在對多個潛在客戶進行計數，因此我們使用事務處理這些更新。

這將是這個樣子：

var x = new Firebase('https://countingex.firebaseio-demo.com/'); 

x.on('value', function f(s) { 
    $('#counting').text(0 + s.val()); 
}); 

$('#btn').click(function() { 
    x.transaction(function(current_value) { 
    return current_value + 1; 
    }); 
}); 

$('#reset').click(function() { 
    x.set(0); 
}); 

我已經把working example up on JSFiddle;通過在多個窗口中打開它看看。爲了簡單起見，我忽略了有關魔術數字50的條件。

要開始使用其他Firebase基礎知識，我建議您查看我們的interactive tutorial。