как стрелять window.resize только один раз?

Question

Вот мой код;

$(window).resize(function() { 
 
    if ($(window).width() >= 760) { 
 
    $('.sidebar-left').one().css("display", "block") 
 
    } else if ($(window).width() <= 760) { 
 
    $('.sidebar-left').one().css("display", "none") 
 

 
    } 
 

 
}); 
 

 
var m = $(".menu"); 
 

 
m.addClass('fa-bars'); 
 

 
m.on('click', function() { 
 
    if (m.hasClass('fa-bars')) { 
 
    m 
 
     .removeClass('fa-bars') 
 
     .addClass('fa-times'); 
 
    $(".sidebar-left").css("display", "block") 
 
    } else { 
 
    m 
 
     .removeClass('fa-times') 
 
     .addClass('fa-bars'); 
 
    $(".sidebar-left").css("display", "none") 
 

 
    } 
 
});

.sidebar-left { 
 
    width: 100px; 
 
    position: fixed; 
 
    background-color: black; 
 
    height: 100%; 
 
} 
 
.menu.fa { 
 
    display: none; 
 
} 
 
@media handheld, 
 
screen and (max-width: 760px) { 
 
    .sidebar-left { 
 
    display: none; 
 
    width: 100%; 
 
    background-color: black; 
 
    height: 100px; 
 
    } 
 
    .menu.fa { 
 
    display: inline-block; 
 
    font-size: 35px; 
 
    color: black; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu fa"></div> 
 
<div class="sidebar-left"></div>

И plunk. (здесь может быть легче протестировать)

Так что это просто меню. Проблема заключается в том, что в настоящее время событие resize будет выполняться каждый раз, когда изменяется страница, поэтому, если у меня есть меню, отображаемое под 760 пикселями, оно автоматически исчезнет при изменении размера, если я его открываю.

Если я полностью отменил функцию изменения размера javascript и оставил ее в css, проблема в том, что если я открою и закрою меню в меньшем окне, на дисплее будет установлено значение none, когда я снова закрою окно.

Я пробовал несколько других вещей, но, похоже, не могу придумать способ сделать это. Цель состоит в том, чтобы просто воспроизвести то, что делает функция $ (window) .resize, в настоящее время, но для этого события срабатывает только после того, как окно изменилось за пределы точек.

Надеюсь, что проблема объясняется четко.

Благодаря

Answer 1

Вы можете использовать one() метод JQuery, которая активируется только один раз:

$(window).one('resize', function() { 
    if ($(window).width() >= 760) { 
    $('.sidebar-left').one().css("display", "block") 
    } else if ($(window).width() <= 760) { 
    $('.sidebar-left').one().css("display", "none") 

    } 

}); 

Это позволит решить ваш вопрос, как просили, но я бы на самом деле рекомендую не отключая событие изменения размера и только обработку это лучше, то есть проверить, правильно ли открывать/закрывать боковую панель.

Answer 2

Вот плагин, который я сделал, с обработчиком resize begin, обработчиком resize end и, конечно же, обработчиком on resize.

(function() { 
var resizeEventHandler = function(resizeTarget, _maxResizeWaitTime, onResizeBeginCB, onResizeEndCB, onResizeCB) { 
    if(resizeTarget){ 
     var resizeTimer = null; 
     var resizeBegun = false; 
     var maxResizeWaitTime = _maxResizeWaitTime || 500; 

     resizeTarget.addEventListener('resize', function() { 
      if (!resizeBegun) { 
       if(onResizeBeginCB){ 
        onResizeBeginCB(); 
       } 
       resizeBegun = true; 
      } 

      if(onResizeCB){ 
       onResizeCB(); 
      } 

      clearTimeout(resizeTimer); 

      resizeTimer = setTimeout(function() { 
       if(onResizeEndCB){ 
        onResizeEndCB(); 
       } 
       resizeBegun = false; 
      }, maxResizeWaitTime); 
     }); 

    }else{ 
     console.error('No resizeTarget specified!'); 
    } 
}; 

this.resizeEventHandler = resizeEventHandler; 

}).call(this); 

Зов это следующим образом:

function onResizeBegin() { 
    $("body").append('onResizeBegin<br/>') 
} 

function onResizeEnd() { 
    $("body").append('onResizeEnd<br/>') 
} 

function onResize() { 
    $("body").append('onResize<br/>') 
} 

var resizeEventHandler1 = new resizeEventHandler(window, 500, onResizeBegin, onResizeEnd, onResize); 

JSfiddle: https://jsfiddle.net/sv52m1y2/3/