如何根據屏幕大小啓動功能並在調整大小後停止其他功能？

我試圖根據加載後的屏幕大小啓動不同的功能，調整大小和滾動。爲了防止在其他功能計算的影響，我需要阻止它們。如何根據屏幕大小啓動功能並在調整大小後停止其他功能？

這裏，如果例如從Jsfiddle 這裏虛擬功能是例如用實函數從Jsfiddle（它不顯示HTML或CSS，只是你的理解函數）

如果你看一下控制檯，您會看到第一次rezise第一個函數運行後，但當你得到另一個窗口大小斷點時，另一個函數將與第一個函數一起運行。如果您獲得第三個斷點，則與第三個函數相同。我想停止功能後，窗口改變大小，另一個斷點

這裏是我的jQuery：

function sticker1220() { 
    $(window).on("load resize scroll",function(){ 
    console.log('sticker1220'); 
    }); 
}; 

function sticker950() { 
    $(window).on("load resize scroll",function(){ 
    console.log('sticker950'); 
    }); 
}; 

function sticker320() { 
    $(window).on("load resize scroll",function(){ 
    console.log('sticker320'); 
    }); 
}; 

function checksize() { 

    if ($(window).width() > 1220) { 
    sticker1220(); 
    } else if ($(window).width() > 640 & $(window).width() < 1219) { 
    sticker950(); 
    } else if ($(window).width() < 639) { 
    sticker320(); 
    } 
}; 

checksize(); 
$(window).resize(function() { 
checksize(); 
$('p').text($(window).width()); 
});

來源

2017-03-25 Angelzzz

我可能不會把這些聽衆在所有三個功能。我可能會將它們設置在頂層，並且從普通處理程序控制它們的執行。否則，如果其中一個函數運行，您將在其中添加處理程序/偵聽器，並且如果需要停止它，則必須刪除這些處理程序。但是因爲你沒有引用它們（並且我沒有在代碼中看到任何刪除器），你會如何期待這些函數停止？請注意，您可以將所需的所有處理程序添加到給定事件中，他們只會全部觸發。 –

你可以做這樣的事情。

我已經將媒體查詢抽象爲一個對象，如果有可用的對象可以迭代查找適用的回調。

現在只有調整大小回調，這是更容易管理，因爲你不需要運行單獨的調整大小事件，可能會鎖定你的UI線程。如果您更改屏幕分辨率，事件將正常工作，而之前每次調整屏幕大小時都會綁定新的調整大小事件。

如果您需要使速度更快，您可以使用setTimeout將resize事件更改爲遞歸計時器。

function checksize(mediaQueries) { 
 
    return function(e) { 
 
    const width = window.innerWidth 
 
    $('p').text(width) 
 
    const query = mediaQueries.find(x => { 
 
     switch (true) { 
 
     case !!x.min && !!x.max: 
 
      return width >= x.min && width < x.max 
 
     case !!x.min: 
 
      return width >= x.min 
 
     case !!x.max: 
 
      return width <= x.max 
 
     default: 
 
      return false 
 
     } 
 
    }) 
 
    if (typeof query.cb === 'function') { 
 
     return query.cb(e) 
 
    } 
 
    } 
 
} 
 

 
var atMedia = [ 
 
    { 
 
    max: 639, 
 
    cb: function(e) { 
 
     console.log('sticker320') 
 
    } 
 
    }, 
 
    { 
 
    min: 640, 
 
    max: 1219, 
 
    cb: function(e) { 
 
     console.log('sticker950') 
 
    } 
 
    }, 
 
    { 
 
    min: 1220, 
 
    cb: function(e) { 
 
     console.log('sticker1220') 
 
    } 
 
    } 
 
] 
 

 
$(window).resize(checksize(atMedia)).trigger('resize')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p></p>

來源

2017-03-25 16:13:47 synthet1c

如何根據屏幕大小啓動功能並在調整大小後停止其他功能？

回答

相關問題