2015-10-02 6 views
1

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

К примеру у меня есть я создал этот скрипт:

$.Lightbox = function() { 

    var el; 

    function init() { 
     /*** do some stuff ***/ 
     getMedia(el); 
    } 

    function getMedia(el) { 
     media_type = 'video'; 
     switch(media_type) { 
      case 'image': 
       /*** do some stuff ***/ 
       load_image(); 
       break; 
      case 'video': 
       /*** do some stuff ***/ 
       load_video(); 
       break; 
     } 
    } 

    function load_video() { 
     el.on('removeVideo',function() { 
      /*** do some stuff ***/ 
     }); 
    } 

    function load_image() { 
     el.on('removeVideo',function() { 
      /*** do some stuff ***/ 
     }); 
    } 

    /*** need to be an event that I can trigger and detect when it's finish ***/ 
    function removeVideo() { 
     /*** just for the example ***/ 
     if ($('iframe').length > 0) { 
      $('iframe').attr('src','').load(function(){ 
       $('iframe').remove(); 
      }); 
     } else { 
      $('img').remove(); 
     } 
    } 

    $(document).on('click touchend',next_prev, function() { 
     el.on('removeVideo',function() { 
      getMedia(); 
     }); 
     return false; 
    }); 

    $(document).on('click touchend',close, function() { 
     el.on('removeVideo',function() { 
      /*** do some stuff ***/ 
     }); 
     return false; 
    }); 

    init(); 

}; 

Что такое правильный способ создать слушатель пользовательских событий в плагине. Я не знаю, как справиться с этим и как правильно его создать.

ответ

1

См .bind() и .trigger() методы:

http://api.jquery.com/bind/

http://api.jquery.com/trigger/

el.bind("removeVideo", function() { 
    // what to do when removeVideo is triggered 
}); 

, то вы можете вызвать событие:

el.trigger("removeVideo"); 

EDIT:

Выполнить код после завершения removeVideo

Раствор 1:

function removeVideo() { 
    ... 
    el.trigger("removeVideoComplete"); 
} 

el.bind("removeVideoComplete", function() { 
    // What you want 
}); 

Раствор 2:

function removeVideo() { 
    ... 
    // simply do what you want ! Maybe call a function ? 
} 

Раствор 3:

function removeVideo(callback) { 
    ... 
    callback(el); 
} 

... 
var callback = function(el) { 
    // what you want 
} 
removeVideo(callback); 
+0

Благодарим вас за ответ. Но такой принцип, похоже, синхронизирован, и мне нужно что-то, ожидающее завершения асинхронной задачи, как .load(). Целью игры является выполнение кода только при завершении удаления видео. Это не относится к вашему методу ... – freaky

Смежные вопросы