在窗口調用中調用相同的函數並調整窗口大小

我有兩種不同的函數可以根據屏幕大小調用。我叫他們準備的功能是這樣的：在窗口調用中調用相同的函數並調整窗口大小

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

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

但我想再次打電話給他們上的窗口大小調整事件，因爲功能沒有那麼叫。所以我寫了這一點：

$(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_mobile已多次調用，當我調整窗口的工作。這種情況下最好的解決方案是什麼？

來源

2017-03-01 Imrul.H

現在有一個反彈是很好的。 'if（window.resizeEvt）{clearTimeout（window.resizeEvt）;}'你應該把它包含在這個條件中，否則它會拋出錯誤。檢查控制檯日誌。 – Jai

只需將您的代碼放入單獨的函數中，然後將該函數設置爲resize事件處理程序和就緒事件處理程序！ –

你的代碼看起來有點奇怪。考慮這個例子

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) 
 

 
})

來源

2017-03-01 10:32:40 disstruct

是的代碼有點混亂。謝謝你提到這一點。但是你的解決方案不能解決我的問題。 –

我第一次不明白這個問題。我編輯了我的答案。這應該工作 – disstruct

另一個編輯。現在更易讀 – disstruct

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

如果你想保持resize事件的延遲，然後更改上面這最後一行：

$(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); 
});

來源

2017-03-01 10:34:50

嗯..感謝大家的幫助。我GOOGLE了一下，找到了一個解決辦法。調整大小後，我必須解除在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(); 
    } 
}

來源

2017-03-01 10:57:26

在窗口調用中調用相同的函數並調整窗口大小

回答

相關問題