ウィンドウの準備とウィンドウのサイズ変更で同じ機能を呼び出す

Question

画面のサイズに基づいて2つの異なる機能を呼び出すことができます。

しかし、私は関数が呼び出されていないので、再びウィンドウのサイズ変更イベントを呼び出す必要があります。

$(window).bind('resize', function(e) { 
    window.resizeEvt; 
    $(window).resize(function() { 
     clearTimeout(window.resizeEvt); 
     window.resizeEvt = setTimeout(function() { 
      if ($(window).width() < 768) { 
       faq_mobile(); 
      } else { 
       faq(); 
      } 
     }, 250); 
    }); 
}); 

しかし、私は、ウィンドウのサイズを変更する際の機能のFAQとfaq_mobileが複数回呼び出されたので、これは正常に動作しません。だから私はこれを書きました。この場合の最適な解決策は何ですか？

Answer 1

コードがちょっと変わっています。あなたはその後、これに上記の最後の行を変更、サイズ変更イベントの遅延を維持したい場合は、この例

var isMobileView = false; 
 
var isDesktopView = false; 
 

 
function handleView(width) { 
 

 
    if (width < 768 && isDesktopView) { 
 
    
 
     faq_mobile(); 
 
     isMobileView = true; 
 
     isDesktopView = false; 
 
     
 
    } else if (width >= 768 && isMobileView) { 
 
    
 
     faq(); 
 
     isMobileView = false; 
 
     isDesktopView = true; 
 
     
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    
 
    var width = $(window).width(); 
 
    handleView(width) 
 
    
 
}); 
 

 
$(window).resize(function() { 
 
    
 
    var width = $(window).width(); 
 
    handleView(width) 
 

 
})

Answer 2

function handler() {  // separate the code and wrap it in a function 
    var $window_width = $(window).width(); 

    if ($window_width < 768) { 
     faq_mobile(); 
    } else { 
     faq(); 
    } 
} 

$(handler);     // on load of the document 

$(window).resize(handler); // on resize of the window 

考えてみましょう：

$(window).resize(function() { 
    window.clearTimeout(window.resizeEvt);  // remove previous delay if any 
    window.resizeEvt = setTimeout(function() { // create a new delay 
     handler(); 
     window.resizeEvt = 0; 
    }, 250); 
}); 

Answer 3

まあの..みんなに助けてくれてありがとう私は少しそれを見つけ、それのための修正を見つけた。私は、サイズ変更が完了した後、faqおよびfaq_mobile関数の中で追加されたイベントをバインド解除する必要がありました。その後、これらの関数を再度呼び出します。変更されたコードは次のとおりです：（あなたの助言のために@disstructに感謝します）。

$(document).ready(function() { 
    var width = $(window).width(); 
    handleView(width); 
}); 

$(window).bind('resize', function(e) { 
    window.resizeEvt; 
    $(window).resize(function() { 
     clearTimeout(window.resizeEvt); 
     window.resizeEvt = setTimeout(function() { 
      // here i am unbinding the click events which were previously added inside faq and faq_mobile functions. 
      $('.faq-expand, .answer-close').off('click'); 
      var width = $(window).width(); 
      handleView(width); 
     }, 250); 
    }); 
}); 

function handleView(width) { 
    if (width < 768) { 
     faq_mobile(); 
    } else { 
     faq(); 
    } 
}