Как мне решить эту проблему в JQuery?

Question

$("#id_address_input").bind("blur",function(e){
    //do a lot of stuff, set variables.
});

Итак, у меня есть текстовое поле, которое, когда пользователь выходит из него ... эта вещь запускается и обрабатывает.Когда пользователь нажимает кнопку «Отправить», эта размытость срабатывает.И в середине обработки форма отправляет.Это все испортило.

Как мне это исправить?Я думал о добавлении задержки на form.submit, чтобы он закончил обработку.Но это плохая идея, потому что я не представляю, насколько быстро работает браузер пользователя и / или Карты Google.

Answer 1

Попробуйте флаг?

var doSubmit = true;

$("#id_address_input").bind("blur",function(e){
    doSubmit = false;
    //do a lot of stuff, set variables.
    doSubmit = true;
});

$("#form").submit(function(){
    if(doSubmit){
        return true;
    }else{
        // keep checking until doSubmit is true
        window.setInterval(function(){if(doSubmit){$("#form").submit();}},1000);
        return false;
    }
});

Answer 2

В вашем обработчике blur вы должны делать что-то, что «уступает» браузеру (setTimeout, асинхронный вызов ajax и т. Д.), Потому что в противном случае браузер не будет прерывать ваш код JavaScript для отправкиформа.Ниже приведен пример, подтверждающий это.

Если вы делаете что-то, что уступает браузеру из обработчика blur, вам нужно будет запретить отправку формы с помощью *Обработчик 1008 *, а затем отправить его, когда все (включая различные действия в обработчике blur) будет готово.Это может быть немного сложно.

Лучший ответ - удалить все, что есть в обработчике blur, который уступает браузеру.Если вы не можете этого сделать, вы, вероятно, просматриваете счетчик блокировок в форме и заставляете обработчик отправки проверять этот счетчик блокировок:

// Somewhere, ensure the form has a lock count of zero
$('#theForm').data('submitlock', 0);

// Your blur handler increments the lock
// In the blur handler:
$('#theForm').data('submitlock', $('#theForm').data('submitlock') + 1);
// ...and when done
$('#theForm').data('submitlock', $('#theForm').data('submitlock') - 1);

// The submit handler might look something like this:
$('#theForm').submit(function() {

    // Get a jQuery wrapper for the form
    var $this = $(this);

    // Locked?
    if ($this.data('submitlock') > 0) {
        // Yes, set up the recheck and prevent form submission
        setTimeout(recheck, 10);
        return false;
    }

    // Function to periodically retry submission
    function recheck() {
        // Still locked?
        if ($this.data('submitlock') > 0) {
            // Keep waiting
            setTimeout(recheck, 10);
        }
        else {
            // Nope, submit the form using the underlying DOM object's submit function
            $this[0].submit();
        }
    }
});

Пример в реальном времени (версиянашего примера блокировки ниже, но обновлен, чтобы уступить браузеру)

Помните, что если ваша форма отправляется в новое окно, вы можете столкнуться с блокировщиками всплывающих окон (так как новое окно нев прямой ответ на щелчок пользователя).Но если вы не делаете что-то подобное, вы в хорошей форме с приведенным выше.

---

Вот пример обработчика blur, вызывающего существенную задержку (четыре секунды) перед формойотправлено ( живая копия ):

HTML:

<form action='http://www.google.com/search' target='_new'>
  <label>Search for:
    <input type='text' name='q' value='foo'></label>
  <br><input type='submit' value='Search'>
</form>

JavaScript:

$('input[name=q]').blur(function() {

  var end, counter;

  display("Start blurring");
  counter = 0;
  end = new Date().getTime() + 4000;
  while (new Date().getTime() < end) {
    ++counter;
    if (counter % 100000 == 0) {
      display("Still blurring");
    }
  }
  display("Done blurring");

});

Поместите курсор в текстовое поле изатем нажмите Поиск.Вы увидите четырехсекундную задержку, и тогда поиск откроется в новом окне.Я проверил это на Chrome, Firefox и Opera (на Linux), IE6 на Windows 2000 и IE7 на Windows XP.Все вели себя одинаково.

Answer 3

Ваша форма отправляется с использованием JavaScript.Напишите функцию, которая вызывает onsubmit, и проверьте, завершены ли события, которые должны были произойти в событии размытия.Тогда только отправьте вашу форму