快捷導(dǎo)航

jquery如何解決resize執(zhí)行兩次的問題

更新時間：2023年07月04日 14:07:45 作者：暖陽 (*◎ｖ◎*)

這篇文章主要介紹了jquery如何解決resize執(zhí)行兩次的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

jquery解決resize執(zhí)行兩次問題

代碼如下（示例）：

? ? // - 解決resize執(zhí)行兩次的問題
? ? var n = 0;
? ? jQuery(window).resize(function () {
? ? ? n++;
? ? ? if (n % 2 == 0) {
? ? ? ? n = 0;
? ? ? ? //todo
? ? ? ? // console.log("todo");
? ? ? }
? ? ? // console.log(n);
? ? });

谷歌瀏覽器在測試時，當(dāng)窗口發(fā)生改變時，resize（）函數(shù)有時會執(zhí)行一次，有時會執(zhí)行兩次，所以改進為下面代碼。

var resizeTimer = null;
jQuery(window).resize(function () {
?? ?if (resizeTimer) clearTimeout(resizeTimer);
?? ?resizeTimer = setTimeout(function () {
?? ?// console.log("窗體發(fā)生改變了");
?? ?//todo
?? ?}, 100);
});

擴展Jquery的resize方法

（原生的resize只針對window，因項目需要擴展了此方法,目前只在DIV上使用過，后續(xù)如果修改代碼會對此代碼進行更新）

/**
?* 封裝非Window對象的resize方法
?* callback:回調(diào)函數(shù)(長寬發(fā)生變化時觸發(fā))
?*/
$.fn.divResize=function(callback, setting){
? ?var cycleTime = 250; // 定義監(jiān)控大小變化的時間
? ?if(setting&&setting.cycleTime){
? ? ? cycleTime = setting.cycleTime;
? ?}
? ?if(callback==undefined||callback==null){
? ? ? return;
? ?}
? ?if(!(typeof callback == "function")){
? ? ? return;
? ?}
? ?$(this).each(function(){
? ? ? var resizeDom = this;
? ? ? resizeDom.data = {};
? ? ? resizeDom.data.width = $(resizeDom).css("width"); // 存放當(dāng)前寬度
? ? ? resizeDom.data.height = $(resizeDom).css("height"); // 存放當(dāng)前高度
? ? ? resizeDom.callback = callback;
? ? ? // 定義監(jiān)控函數(shù)
? ? ? var resizeMonitor = function(){
? ? ? ? ?// 判斷高度和寬度是否發(fā)生變化
? ? ? ? ?if($(resizeDom).css("width")!=resizeDom.data.width||$(resizeDom).css("height")!=resizeDom.data.height){
? ? ? ? ? ? resizeDom.data.width = $(resizeDom).css("width");
? ? ? ? ? ? resizeDom.data.height = $(resizeDom).css("height");
? ? ? ? ? ? resizeDom.callback();
? ? ? ? ?}
? ? ? ? ?var callFunc = arguments.callee; // 獲取本身函數(shù)
? ? ? ? ?setTimeout(function(){callFunc();}, cycleTime);
? ? ? };
? ? ? resizeMonitor();
? ?});
};

/**
?* 擴展resize方法(可支持window和非window對象)
?* callback:回調(diào)函數(shù)(長寬發(fā)生變化時觸發(fā))
?*/
? ?$.fn.resizeOld = $.fn.resize;
$.fn.resize=function(callback, setting){
? ?$(this).each(function(){
? ? ? ? ? ?var resizeDom = this;
? ? ? ?// 確定綁定的對象是否是window
? ? ? ? ? ?if (this == window) {
? ? ? ? ? ? ? ?$(window).resizeOld(function () {
? ? ? ? ? ? ? ? ? ?callback();
? ? ? ? ? ? ? ?});
? ? ? ? ? ?} else {
? ? ? ? ? ? ? ?resizeDom.callback = callback;
? ? ? ? ? ? ? ?$(this).divResize(callback, setting);
? ? ? ? ? ?}
? ?});
};