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 。