Есть ли способ заставить код запускаться ПОСЛЕ обновления стиля кнопки после нажатия кнопки? - PullRequest
Новая
       15

Есть ли способ заставить код запускаться ПОСЛЕ обновления стиля кнопки после нажатия кнопки?

2 голосов
/ 02 июня 2011

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

У нас есть экран, на котором несколько кнопок используются для переключения отображаемой информации (в основном, кнопки используются в качестве переключателей). Мы добавили обработчики click к кнопкам, которые выглядят примерно так: 

// This is all grossly oversimplified, of course.
function callService() {
  service.sendRequest()
    .success(function(response) {
      displayResponse(response);
      $('#button-id').addClass('highlighted')
    })
    .error(function(response) {
      displayErrors(response.errors);
    });
}

$('#button-id').click(function() {
  callService();
});

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

Вот что происходит: когда мы устанавливаем для нашего фиктивного сервера (сервера, настроенного на локальное тестирование, которое просто возвращает фиктивные данные) задержку 0 мс, кнопка не подсвечивается. Похоже, что подсветка применяется, но затем сразу удаляется с помощью jQuery, поскольку она самостоятельно выполняет стилизацию для обработки нажатия (т. Е. Обновляет стиль при наведении, нажатии и затем при отпускании).

Когда мы устанавливаем задержку на что-то более реалистичное или даже равное 250 мс (этого не произойдет, если использовать фактические внутренние службы, используемые этим приложением), проблема исчезнет. Мое лучшее предположение заключается в том, что jQuery завершает все свои обновления стилей в этом временном окне, поэтому, когда служба, наконец, возвращает ответ, обновление кнопки больше не перезаписывается.

На самом деле, это не является большой проблемой, поскольку службы, используемые в производстве, будут иметь время задержки, близкое к 1-2 с. Мне просто любопытно, есть ли способ справиться с этим «правильным» способом; например, возможно ли написать код, который будет запускаться гарантированно после того, как jQuery завершит множественные обновления стиля элемента?

Ответы [ 2 ]

2 голосов
/ 02 июня 2011

Просто используйте свой собственный класс и переопределите все стили, к которым применяется jQuery. Что-то вроде http://jsfiddle.net/morrison/cj8ra/.

1 голос
/ 02 июня 2011

Может быть, вы могли бы попробовать это: 

$('div').live('pageshow',function(event, ui){
  alert('This page was just hidden: '+ ui.prevPage);
});

Документы: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html

$('#page_id').live('pageshow',function(event, ui){
    $('#button-id').click(function() {
        callService();
    });
});
...