jQuery-为什么在函数内部不能为全局变量赋值？

Question

我正在构建一个带有2个按钮的滑块，以使数字升/降。 这是jsfiddle。

这有效：

    var update_num;
    $('.plus').on('click', function() {
         update_num = $('output').text()*1;    
       if (update_num < 100) {
            $('output').text(update_num + 1);
        } else {
            $('output').text(100);
        }
        });

    $('.minus').on('click', function() {
        update_num = $('output').text()*1;          
        if (update_num > 0) {
            $('output').text(update_num - 1);
        } else {
            $('output').text(0);
        }
    }); 

但这不起作用：

    var update_num = $('output').text()*1;
    $('.plus').on('click', function() {
         if (update_num < 100) {
            $('output').text(update_num + 1);
        } else {
            $('output').text(100);
        }
        });

    $('.minus').on('click', function() {
        if (update_num > 0) {
            $('output').text(update_num - 1);
        } else {
            $('output').text(0);
        }
    }); 

为什么会这样，因为var update_num是全局的，并且所有其他函数都应该能够读取它？ 使该代码成为DRY的最佳方法应该是什么？

Answer 1

这里的问题是，在第二个代码片段中， update_num的值仅设置了一次。 例如，如果其值为2。则每次单击减号按钮时，其值分别为（2-1）和单击加号按钮时的方式为（2 + 1）。 每单击一次按钮， update_num的值应更改一次。

您的问题说，为什么不给全局变量赋值。 但是在第二个代码中，单击按钮时永远不会完成代码分配。 尝试这个：

var update_num = $('output').text()*1;
$('.plus').on('click', function() {
     if (update_num < 100) {
        $('output').text(++update_num);
    } else {
        $('output').text(100);
    }
    });

$('.minus').on('click', function() {
    if (update_num > 0) {
        $('output').text(--update_num);
    } else {
        $('output').text(0);
    }
});

Answer 2

记住一件事，全局变量很危险。 假设您最初将update_num为34。因此在$('.plus').on('click', function()该值变为35。但是如果再次单击，则update_num不会更改，因为它仅在一次被设置var update_num = $('output').text()*1;没有两种方式绑定，这意味着如果更改$('output').text()*1;则update_num的值也将更改。搜索google并了解有关two way binding或Observable Javascript Pattern 。