如何根据屏幕大小启动功能并在调整大小后停止其他功能？答案

【问题标题】：How to launch functions depending on screen size and stop others after resize?如何根据屏幕大小启动功能并在调整大小后停止其他功能？
【发布时间】：2017-03-25 11:39:38
【问题描述】：

我试图在加载、调整大小和滚动后根据屏幕大小启动不同的功能。为了防止计算在其他函数中的影响，我需要停止它们。

这里是 Jsfiddle 中的虚拟函数示例以下是来自Jsfiddle 的真实函数示例（它不显示 html 或 css，仅用于您理解的函数）

如果您查看控制台，您会看到在第一次调整后第一个函数运行，但是当您获得另一个窗口大小断点时，另一个函数将与第一个函数一起运行。如果您获得第三个断点，则与第三个函数相同。我想在窗口改变大小到另一个断点后停止函数

这是我的 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());
});

【问题讨论】：

我可能不会将这些侦听器放在所有三个函数中。我可能会将它们设置在顶层，并从通用处理程序控制它们的执行。否则，如果其中一个函数运行，您将在其中添加处理程序/侦听器，如果您需要它停止，则必须删除这些处理程序。但是由于您没有创建对它们的引用（并且我在您的代码中没有看到任何移除程序），您希望这些函数如何停止？请注意，您可以将所需的所有处理程序添加到给定事件，它们都会触发。

标签： javascript jquery

【解决方案1】：

你可以这样做。

我已将媒体查询抽象为一个对象，如果有可用的回调，可以迭代该对象以找到适用的回调。

现在也只有调整大小回调，这更容易管理，因为您不需要运行可能锁定您的 ui 线程的单独调整大小事件。如果您更改屏幕分辨率，这些事件将正常工作，而以前每次屏幕调整大小时都会绑定一个新的调整大小事件。

如果您需要让它更快，您可以使用 setTimeout 将调整大小事件更改为递归计时器。

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>

【讨论】：