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.