Javascript requestanimationframe（）中的函数调用次数太多，如何只调用一次？

我目前有一个脚本，在其中跟踪元素的.offset（）位置。当这个元素到达窗口的上边缘、左边缘、下边缘或右边缘时，我需要调用一个函数，该函数应该只调用一次，然后在下次到达窗口边缘时再次调用

现在我有这个：

var exceededBounds = false

function checkPosition(element) {
 var pos = element.offset(); 
 var maxBoundsX = $(window).width();
 var maxBoundsY = $(window).height();
 var minBoundsX = 0
 var minBoundsY = 0

 // if the element hits one of the edges of the window
 if (pos.left >= maxBoundsX || pos.top >= maxBoundsY || pos.left <= minBoundsX || pos.top <= minBoundsY) {
  if (!exceededBounds) {
   exceededBounds = true
  }
  else {
   exceededBounds = false
  }
 }
 else {
  exceededBounds = exceededBounds;
 }
}

function something() {
 // do something here, which only happens once
}


function init() {
 checkPosition(element);
 if (exceededBounds) {
  something()
 }
  requestAnimationFrame(init);
}

requestAnimationFrame(init);

var exceedbounds=false
功能检查位置（元素）{
var pos=element.offset（）；
var maxBoundsX=$（窗口）.width（）；
var maxBoundsY=$（窗口）.height（）；
var minBoundsX=0
var minBoundsY=0
//如果元素碰到窗口的一条边
如果（pos.left>=maxBoundsX | | pos.top>=maxBoundsY | | pos.left某物（）如果元素有
超出边界
，将被多次调用，除非您的
某物
立即更改元素，使其在边界内-这就是递归调用requestAnimationFrame的工作方式，它将不断被反复调用

我建议更改
某物
，以便立即更改元素，使其再次在边界内-然后，
某物
将只运行一次（直到再次超出边界）。
您需要保留两个布尔值：


超过
以了解您的元素当前是否超出范围
已更改
，以了解最后一次检查是否已超过


var元素=$（'#el'）；
var=false；
var=假；
功能检查位置（元素）{
var pos=element.offset（）；
var maxBoundsX=$（窗口）.width（）；
var maxBoundsY=$（窗口）.height（）；
var minBoundsX=0
var minBoundsY=0
//如果元素碰到窗口的一条边
如果（pos.left>=maxBoundsX | | pos.top>=maxBoundsY | | pos.left>=maxBoundsY | | pos.left您是否尝试过将
execedbounds=false；
放入
if（execedbounds）
？这样您将继续使用
checkPosition（element）
检查元素的位置
仅当
超出边界
再次设置为
真
时才会运行
内部
检查位置（元素）
方法是错误的。不要使用
请求动画框架（）
。使用`相反。嗯，我不能立即更改元素，将其推回边界内，因为我需要使动画自然（我实际上也在使用CSS动画来移动元素，所以我不能使用原始值来控制它）。好的，谢谢。我理解这一点。现在唯一的问题是调用something（）函数两次…我只想调用something（）一次（我将使用它来更改元素的样式），直到元素再次超出边界（当风格再次改变时）@biscuit_uu我真的不明白你在说什么。如果你只想在越界时发射
something
，那么在
init
call
If（changed&&excessing）{something（）}