Как связать как размытие, так и изменение, но только запускать функцию один раз в JQuery/Javascript?

Я пытаюсь вызвать функцию при изменении элемента select.

Поскольку у Ipad возникают проблемы с (изменение), я также хочу привязать к "размытию", который отлично работает на Ipad.

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

Это то, что я сейчас делаю, но... не очень приятно:

// make sure binding is only assigned once
var compSel = $('#my_select');
if ( compSel.jqmData('bound') != true ){
    console.log("bound");
    compSel.jqmData('bound', true)
        .on( $.support.touch ? 'blur' : 'change', function(){
            console.log("trigger");
            // run function xyz
        })
    }

Это работает, если вы можете жить со всеми сенсорными устройствами, делающими это с размытием.

Вопрос:
У кого-то есть лучшая идея, чтобы убедиться, что размытие и изменение только запускают функцию один раз?

Спасибо за помощь!

ОТВЕТЫ

Ответ 1

Попробуйте создать функцию, связанную с обоими событиями, и добавив тайм-аут для вызова функции. Таким образом, если функция вызывается несколько раз, она будет запускаться только один раз.

Что-то вроде этого (вы можете настроить таймаут при необходимости):

function blurChange(e){
    clearTimeout(blurChange.timeout);
    blurChange.timeout = setTimeout(function(){
        // Your event code goes here.
    }, 100);
}

$('#my_select').on('blur change',blurChange);

Ответ 2

не знаю о ipad, но в браузере возможно что-то вроде этого

$("#dataTable tbody").on("click blur", "tr", function(event){
        if (event.type == "click")
        { 
        //do stuff
        }
        else
        {
        //do nothing
        }
});

Ответ 3

Это нехорошо, но вы можете вызвать change в функцию blur и выполнить все действия в функции change:

...
$(document).on("change", "#yourelement", function(){
    //do your stuff
});
....
$(document).on("blur", "#yourelement", function(){
    $("#yourelement").change();
    //alternatively, you can trigger the change event
    //$("#yourelement").trigger("change");
});

Это не выглядит красиво, но я думаю, что он должен работать.

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

var executed = false;
...
$(document).on("change blur", "#yourelement", function(){
    if(!executed){
        executed = true;
        //do your stuff
    }
});

Ответ 4

Прикрепите несколько событий, которые вы можете использовать так же

<select class="form-control" id="Category" name="Category" required>
   <option value="">Choose an option</option> 
   <option value="1">Your Text</option> 
</select>
<p class=""></p>

$( "#Category" ).on( "blur change", function( event ) {
    if($(this).val()===""){
            $(this).next().text("Please choose category").css("color","#a94442");
        }
        else
        {
            $(this).next().text("");
        }

});

Ответ 5

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

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

$(document).on("change blur",".selector", function(){

    if($(this).data("triggered") == "1"){
        $(this).data("triggered","0");
        return;
    }
    $(this).data("triggered","1");

    // your script here

    // fix for "every other time" issue described above
    var el = $(this);
    setTimeout(function(){ el.data("triggered","0"); }, 200);
}
  • Вы можете рассмотреть событие "ввода", если хотите обнаружить изменение до того, как пользователь покинет элемент.
  • Вы также можете подумать о написании сценария, чтобы он был безопасен для запуска несколько раз (идемпотент) и был достаточно эффективным, чтобы он не влиял на производительность, если он запускается дважды.

Ответ 6

Вы можете одновременно привязывать к нескольким событиям:

$(document).on('blur change','#mySelector',function(){
    // this is called on either
});