如何仅在特定事件之后加载服务器变量？答案

【问题标题】：How to load a server variable only after a specific event?如何仅在特定事件之后加载服务器变量？
【发布时间】：2017-03-19 14:13:11
【问题描述】：

只有在 db 中的 var 更改后才需要加载两个服务器变量。

现在，它们会在页面加载后立即加载，因此保持事件发生前的值 (upvotesRef.transaction)。

 $('.HP').text("<%= post.upvotes - post.downvotes %> HP");

代码：

$('.UpvoteButton').click(function () {


        var $this = $(this);
        if ($this.hasClass("on")) {
            $this.removeClass("on");
            upvotesRef.transaction(function (upvotes) {  
               if (!upvotes) { 
                  upvotes = 0; 
               } 
                 upvotes = upvotes - 1; 
                 return upvotes; 
            }); 
            userRef.remove();
            $('.HP').text("<%= post.upvotes - post.downvotes %> HP");

编辑：

我最终创建了局部变量来解决我的问题。谢谢你的回答！

var upvotesLocal = <%= post.upvotes %>;
var downvotesLocal = <%= post.downvotes %>;

$('.UpvoteButton').click(function () {


        var $this = $(this);
        if ($this.hasClass("on")) {
            $this.removeClass("on");
            upvotesRef.transaction(function (upvotes) {  
               if (!upvotes) { 
                  upvotes = 0; 
               } 
                 upvotes = upvotes - 1; 
                 return upvotes; 
            }); 
            upvotesLocal = upvotesLocal -1
            userRef.remove();
            $('.HP').text((upvotesLocal - downvotesLocal) + " HP")

【问题讨论】：

您有没有想过使用 AJAX 来更新变量？
@Dez 我该怎么做？我在 AJAX 方面不是很有经验。您能否发布使用 AJAX 作为答案的解决方案，以便我接受？
在此处检查 jQuery AJAX 对 node.js 的调用：stackoverflow.com/questions/5373987/…，除了我提供的答案。

标签： javascript jquery node.js

【解决方案1】：

您应该在事务之后获取并更新变量，对吗？
这意味着它应该发生在您的回调中。
我假设您使用的是firebase 交易方法。
那么你的回调应该作为第二个参数：

$('.UpvoteButton').click(function () {


        var $this = $(this);
        if ($this.hasClass("on")) {
            $this.removeClass("on");
            upvotesRef.transaction(function (upvotes) {  
               if (!upvotes) { 
                  upvotes = 0; 
               } 
                 upvotes = upvotes - 1; 
                 return upvotes; 
            }, updateVotes); //<-- here the callback function added
            userRef.remove();

function updateVotes(error, isCommitted, upvotes) {
   //here you got already your new upvotes
   //but you should request the downvotes,
   //here you need the ajax request, see e.g. Dez's answer or comments
}

【讨论】：

我通过使用局部变量找到了一个更优雅的解决我的问题的方法，不过感谢您的输入，这绝对是正确的！

【解决方案2】：

考虑到我在 node.js 方面没有经验，您应该做的是替换 $('.HP').text("<%= post.upvotes - post.downvotes %> HP"); 行以进行 AJAX 调用，您可以在其中获取更新的变量并使用 jQuery 添加它们。大致如下：

$('.UpvoteButton').click(function () {

        var $this = $(this);
        if ($this.hasClass("on")) {
            $this.removeClass("on");
            upvotesRef.transaction(function (upvotes) {  
               if (!upvotes) { 
                  upvotes = 0; 
               } 
                 upvotes = upvotes - 1; 
                 return upvotes; 
            }); 
            $.ajax({
                type : 'POST',
                data: { userRef: userRef},
                contentType: 'application/json',
                url: 'http://localhost:3000/endpoint',      
                success: function(data) {
                    console.log('success');
                    console.log(JSON.stringify(data));
                    /* Do whatever you need with your data, for example*/
                    $('.HP').text(data.upvotes + "-" + data.downvotes + "HP");
                },
                error : function (event) {
                    console.log(event);
                }
            });
            userRef.remove();
            ...
}

在node.js 方面，您将需要以下方面的内容：

app.post('/endpoint', function(req, res) {
  console.log(req.body.userRef)
  /* Get the upvotes and downvotes and send them back in the response */
  res.contentType('json');
  res.send({ some: JSON.stringify({response:'json'}) });
});

很抱歉无法给出确切的有效答案。

【讨论】：