Question

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

此处是Jsfiddle的虚拟函数示例以下是来自Jsfiddle的实际函数的示例（它不显示html或css，只是用于理解的函数）

如果你看一下控制台，你会看到在第一次重新启动第一个函数后，但是当你得到另一个窗口大小断点时，另一个函数将与第一个函数一起运行。如果得到第三个断点，则与第三个函数相同。我想在窗口改变大小到另一个断点后停止功能

这是我的jquery：

<select id="bgchoice" onchange="changeBG()">
    <option></option>
    <option value="red">Red</option>
    <option value="ivory">Ivory</option>
    <option value="pink">Pink</option>
</select>

Answer 1

你可以这样做。

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

现在也只有调整大小的回调更容易管理，因为你不需要运行可以锁定你的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>

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

1 个答案: