JS меняет курсор только после завершения функции js

У меня есть следующий код

<html>
    <head>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    </head>
    <body style = "background-color:yellow;width:100%;height:100%;">
        <a href = "javascript:test()">test</a>
        <script>
            function test() {
                $("body").css("cursor","wait"); //cursor must be changed here

               $.ajax(...);
            }           
        </script>
    </body>
</html>

Проблема с этим кодом заключается в том, что курсор меняется с default на wait в браузере только после завершения функции test(), но мне нужно, чтобы он изменился в определенной точке функции. Я пробовал использовать FF 58 в Ubuntu 14 и Opera в Windows 7. Я читал много сообщений об этом и пробовал это решение.

$(document).ajaxStart(function() {
    $(document.body).css({'cursor' : 'wait'});
}).ajaxStop(function() {
    //$(document.body).css({'cursor' : 'default'});
});

но безуспешно. Как это исправить? Любые идеи?

И каково желаемое поведение ?? Вы сказали: «Мне нужно, чтобы он изменился в определенной точке функции». Вы имеете в виду, возможно, до вызова ajax?

— 07.04.2018 11:42

@jonhid я редактировал

— 07.04.2018 11:42

Я тоже свой вопрос редактировал! :-)

— 07.04.2018 11:46

@jonhid Да, я показал в коде, в какой точке. См. Функцию test ().

— 07.04.2018 11:47

Вы используете jQuery для вызова ajax?

— 07.04.2018 11:49

@jonhid Да, я только что добавил его в функцию.

— 07.04.2018 11:51

javascript jquery html ajax

07.04.2018 11:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать перед отправкой следующим образом:

$.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......`enter code here`
 });

ИЛИ используйте when и timeout:

<!DOCTYPE html>
<html>

<head>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    function ajaxready() {
      setTimeout(function() {
        $.ajax({
          url: "https://www.w3schools.com/jquery/demo_test.txt",
          beforesend: function() {},
          success: function(result) {
            $("#div1").html(result);

            $("body").css("cursor", "");
          }
        });
      }, 500);



    }

    function loading() {
      $("body").css("cursor", "wait"); //cursor must be changed here
    }
    $(document).ready(function() {
      $("button").click(function() {
        $.when(loading()).done(function() {
          ajaxready();
        });


      });

    });
  </script>
  <style>
    button {
      cursor: inherit
    }
  </style>
</head>

<body>

  <div id = "div1">
    <h2>Let jQuery AJAX Change This Text</h2>
  </div>
  <span></span>
  <button>Get External Content</button>

</body>

</html>

07.04.2018 12:01

  $(document).ajaxStart(function (event, jqxhr, settings) {
        $(document.body).css({ 'cursor': 'wait' });
    });
    $(document).ajaxComplete(function (event, jqxhr, settings) {
        $(document.body).css({ 'cursor': 'normal' });
    });
    $(document).ajaxError(function (event, request, settings) {
        $(document.body).css({ 'cursor': 'normal' });
    });
    function AjaxCall() {
        $.ajax({
            type: "POST",
            url: '/home/AjaxURL',            
            contentType: "application/json; charset=utf-8",
            global: true,// this makes sure ajax set up ajaxStart/ajaxComplete/ajaxerror will triggered
            dataType: "json",
            success: function () { },
            error: function () { }
        });
    }
    $(document).ready(function () {
        AjaxCall();
    });

Примечание. Установка курсора на document.body, как и вы, означает, что он будет применяться только в документе и не будет применяться в других элементах dom, таких как привязка, текстовое поле и т. д.

07.04.2018 12:14

Ответ принят как подходящий

Я нашел ответ. У меня был в ajax async:false -

$.ajax({ ...
     async: false,
      ...     
});

Когда я перешел на

$.ajax({ ...
     async: true,
      ...     
});

все заработало как положено.

08.04.2018 11:21

Другие вопросы по теме

Добавить / удалить класс на основе прокрутки страницы

Window.open с _blank потребляет память родительской вкладки

Как проверить условие v-if с помощью массива в vue js html?

Всплывающее окно, каждый раз принимающее первую запись в таблице

Задайте фиксированную ширину для td, th, если ширина превышает экран, прокрутите

Javascript. Помощь в планировании дат

Встроенное видео Facebook не воспроизводится при нажатии

Jquery ui time picker выбрать текущее время и скрыть прошедшее сегодня время в поле выбора времени

Невозможно загрузить div с внешним URL-адресом

Проверить, было ли загружено изображение

JS меняет курсор только после завершения функции js

Ответы 3

Другие вопросы по теме

Похожие вопросы