Callback функция и глобальные переменные

[drunia85]

Всем привет. Скажу сразу, что проблему вызовов асинхронных функций и считывания результатов из глобальных переменных я понимаю.
Но столкнулся с для меня непонятной проблемой.
Суть проблемы:
Есть некоторая callback функция (Web SQL) вызываемая в результате успешного завершения запроса к БД. Там я считываю данные и записываю в глобальные переменные:

var totalSum = maxSum = 0; 

db.transaction(
  sql, [],
  function(tx, rs) {
    totalSum = rs.rows.item(0)['totalSum'];
    maxSum  = rs.rows.item(0)['maxSum'];
    var button = document.getElementById('button');
    button.setAttribute('onclick', 'checkMyVars();');
  },
  function(tx, err) {alert(err.message)}
);

function checkMyVars() {
  alert('totalSum = ' + totalSum + ' maxSum = ' + maxSum);
}

Так вот после выполнения запроса к БД я при нажатии на кнопку получаю 0!
А вот сам непонятный мне момент: Если вызывать функцию checkMyVars() в теле callback функции то получаю ожидаемые значения в глобальных переменных. В чем проблема мне непонятно (
Буду очень рад пояснениям ...

[Nekromancer]

<button type="button" id="button">button</button>
<script>
var totalSum = maxSum = 0; 

setTimeout(function() {
totalSum = 1;
    maxSum  = 2;
    var button = document.getElementById('button');
    button.setAttribute('onclick', 'checkMyVars();');
}, 1000);

function checkMyVars() {
  alert('totalSum = ' + totalSum + ' maxSum = ' + maxSum);
}
</script>

Работает, только всё равно так, как вы делаете, делать точно не надо.

[drunia85]

Nekromancer,
Спасибо, в этом случае действительно работает. Но у меня по прежнему не работает с моим случаем. Почему так делать не нужно, чем это чревато? как было было бы правильно ?
Для меня досихпор остается загадкой тот факт, что при вызове

var totalSum = maxSum = 0; 

db.transaction(
  sql, [],
  function(tx, rs) {
    totalSum = rs.rows.item(0)['totalSum'];
    maxSum  = rs.rows.item(0)['maxSum'];
    var button = document.getElementById('button');

    checkMyVars();

  },
  function(tx, err) {alert(err.message)}
);

function checkMyVars() {
  alert('totalSum = ' + totalSum + ' maxSum = ' + maxSum);
}

Все отрабатывает как я и ожидаю, а вот в случае назначения обработчика

var totalSum = maxSum = 0; 

db.transaction(
  sql, [],
  function(tx, rs) {
    totalSum = rs.rows.item(0)['totalSum'];
    maxSum  = rs.rows.item(0)['maxSum'];
    var button = document.getElementById('button');

    button.setAttribute('onclick', 'checkMyVars();');

  },
  function(tx, err) {alert(err.message)}
);

function checkMyVars() {
  alert('totalSum = ' + totalSum + ' maxSum = ' + maxSum);
}

при нажатии на кнопку у меня переменные остаются не измененными.

[Nekromancer]

Ну примерно так:

(function() {
var totalSum = 0, 
maxSum = 0;


    var button = document.getElementById('button');
    button.onclick = checkMyVars;
// либо сразу button.addEventListener('click', checkMyVars, false);
 
db.transaction(
  sql, [],
  function(tx, rs) {
    totalSum = rs.rows.item(0)['totalSum'];
    maxSum  = rs.rows.item(0)['maxSum'];
  },
  function(tx, err) {alert(err.message)}
);
 
function checkMyVars() {
  alert('totalSum = ' + totalSum + ' maxSum = ' + maxSum);
}

}());

[drunia85]

Nekromancer, огромное СПАСИБО с

button.onclick = checkmyVars;

заработало. Но в чем же проблема? Через setAttribute() получается обработчик как бы ранее связывается с элементом ???

[Nekromancer]

drunia85,
даже не знаю, что там происходит с этой функцией, вообще так не стоит вешать события и однозначно, их нужно вешать заранее, а не потом, как было у вас.