Эффект Ajax на выводе console.log - PullRequest
Новая
       3

Эффект Ajax на выводе console.log

1 голос
/ 09 июня 2010

Давайте посмотрим на вывод console.log. Нажатие на кнопку меняет название, если мы используем функцию changeName(). Но если мы используем функцию changeNameAjax() (где response.name = 'Ford Prefect'), один щелчок по кнопке не меняет имя, а только второй щелчок. Почему? 

<!DOCTYPE html>
<head>
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function(){

            //changeName();
            changeNameAjax();

            var box = document.getElementById("box").innerHTML;
            console.log(box);

            function changeName(){
                $('#box').html('<p>Ford Prefect</p>');
            }

            function changeNameAjax(){
                $.ajax({
                    url: 'getName.php?jsoncallback=?',
                    dataType: 'json',
                    success: function(response){
                        $('#box').html('<p>' + response.name + '</p>');
                    }
                });
            }

        });
    });
</script>
</head>
<body>
    <button>Update</button>
    <div id='box'>
        <p>Arthur Dent</p>
    </div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 09 июня 2010

Это связано с тем, что AJAX имеет значение асинхронно , что означает, что функция success не запускается до тех пор, пока не будет получен ответ от сервера.Итак, эта строка: 

$('#box').html('<p>' + response.name + '</p>');

Не запускается до после , когда вы позвонили console.log, фактически, если вы нажмете быстро или сервер работает медленно, вы можете нажать несколько раздо того, как функция success завершится один раз.

Даже если ответ мгновенный (например, локальный сервер), поскольку JavaScript является однопоточным, это success все равно происходит потом ...чтобы увидеть это, просто вставьте console.log('Success') в вашу функцию success, тогда вы получите хорошую иллюстрацию порядка и выполнения обратных вызовов.

0 голосов
/ 09 июня 2010

Мои 10 центов: это происходит потому, что вы объявляете функцию changeNameAjax () внутри события click. Первый щелчок будет определять функцию, второй будет выполнять ее.

...