javascript - sweet - Problema con la función dentro de $(ventana).resize-usando jQuery

sweet alert

Question

Quiero usar una función simple para ocultar / mostrar contenido solo en dispositivos móviles.
La función en sí es bastante simple. Yo uso este código aquí para eso:

    $(''.toggleMobile'').click(function() {
        var hideableContent = $(this).parent().find(''.hideable'');
        hideableContent.slideToggle(''medium'');
    });

Entonces ... nada elegante, lo sé.

Se vuelve más complicado a medida que trato de detectar la ventana del navegador.
Creo que me encargué de eso usando las siguientes líneas (probablemente encontrarás formas de mejorarlo):

    function whatMedia() {

        var viewport = $(window).width();
        var mediaType;

        if ( viewport < 767 )
            mediaType = ''mobile'';
        else if ( (viewport >= 767) && (viewport < 991) )
            mediaType = ''tablet'';
        else
            mediaType = ''desktop'';

        return mediaType;
   }

Ahora solo necesito una función que se activa solo cuando la ventana gráfica es mobile (¿quizás el problema está aquí?):

   function toggleMobile(mediaType) {

        if ( mediaType === ''mobile'' ) {
            $(''.toggleMobile'').click(function() {
                var hideableContent = $(this).parent().find(''.hideable'');
                hideableContent.slideToggle(''medium'');
            });
        }
    }

No tengo problemas para verificar la ventana la primera vez que se carga la página. Solo uso esto (código muy simple):

    // Check media type and activate accordingly
    var mT = whatMedia();
    toggleMobile(mT);

Hasta aquí todo bien. Ahora viene la parte divertida:
Quiero ser capaz de detectar si un usuario cambia el tamaño de la ventana del navegador y activar / desactivar la función toggleMobile() consecuencia. .

Yo podría hacer esto:

    $(window).resize(function() {
        var mT = whatMedia();
        toggleMobile(mT);
    }

Como quizás ya sepas, esta $(window).resize hace que Webkit y otros navegadores se vuelvan un poco locos, y repiten la función siempre y cuando el usuario cambie el tamaño de la ventana.
Esto es bueno o malo dependiendo de su opinión sobre él.
Personalmente, no quiero que esto suceda, así que uso esta función que encontré en los foros :

    var waitForFinalEvent = (function () {

        var timers = {};

        return function (callback, ms, uniqueId) {
            if (!uniqueId) {
                uniqueId = "Don''t call this twice without a uniqueId";
        }
            if (timers[uniqueId]) {
                clearTimeout (timers[uniqueId]);
            }
            timers[uniqueId] = setTimeout(callback, ms);
        }

   })();

Mi evento de cambio de tamaño se ve así:

    $(window).resize(function() {
        waitForFinalEvent(function() {
            var mT = whatMedia();
            toggleMobile(mT);
        }, 500, ''1'');         
    }

Esto ciertamente retrasa el cálculo de la ventana del navegador al redimensionar, pero no puedo hacer que funcione la función dentro de él.
No sé cuál es el problema :(
La función Th se dispara dos o más veces, e incluso cuando la ventana gráfica se reconoce como desktop o tablet .

Answer 1

En la función togglemobile, solo registra el evento Click pero nada más, si desea activarlo puede hacer

   $(''.toggleMobile'').click(function() {
        var hideableContent = $(this).parent().find(''.hideable'');
        hideableContent.slideToggle(''medium'');
   }).trigger(''click'');

esto activaría el evento click y ejecutaría el código, alternativamente podría ocultar el elemento de inmediato.

EDITAR: Revisaré mi respuesta un poco. Primero registramos el evento click para el elemento que, mientras slide, cambia el contenido:

   $(''.toggleMobile'').click(function() {
        if(whatMedia() === "mobile") {
           var hideableContent = $(this).parent().find(''.hideable'');
           hideableContent.slideToggle(''medium'');
        }
   });

luego en toggleMobile(mt); función que ahora ocultamos el contenido si el tamaño pasa a los medios móviles

function toggleMobile(mediaType) {

    if ( mediaType === ''mobile'' ) {
        var hideableContent = $(".toggleMobile").parent().find(''.hideable'');
        hideableContent.slideToggle(''medium'');
    }
}

esto es si entiendo, ¿qué quieres?

Veo que esto es probablemente lo que significó @ sje397.