当组件的位置发生变化时，如何使用jQuery或JavaScript触发函数？

我有下面的两个选择器。当更多的选择器附加到“render”后，“comp1”的位置会下降一点，我希望每次“comp1”的位置发生变化时都执行一个函数

我已经尝试绑定到更改事件，但它没有按我希望的那样工作

<div id="render" >
<div id="comp1" >

---

change

事件在输入的输入值更改且输入失去焦点时触发。这在这里没有帮助

当某些元素改变其相对于任何对象的位置时，不会触发任何特殊事件

有一些事件会导致元素重新定位：

• 浏览器窗口的大小已调整。这个很容易被发现
• 加载了一些CSS或图像。您可以尝试连接到所有样式和图像的

  load

  事件。不是很轻
• 一些内容通过Javascript添加到页面中。有各种各样的DOM突变事件，但它们的支持各不相同，并且它们还有其他缺点（即，它们触发得太频繁），因此不推荐使用。他们取代突变观察员的做法也没有得到普遍支持，但至少他们没有其他缺点。请注意，这可能包括其他图像和样式，因此您还需要挂接它们的加载事件
• CSS3转换和动画。当这些开始或结束时，有一些事件发生，但不是在中间。李>
• Javascript改变了一些样式或CSS类。突变事件检测属性更改，但不检测属性更改。至少某些属性更改不会影响相应的属性。仔细观察支撑台
• 用户调整文本区域或另一个元素的大小，并将

  resizeable

  CSS属性设置为除

  resizeable:none以外的任何内容（大多数元素的默认设置）。解决方法可能是禁用调整大小

如果不知道确切的环境，几乎不可能做到这一点

这给我们留下了一个最后的选择，即轮询更改，但它本身也有几个问题：它不会立即接收更改，即使在没有任何更改的情况下也会使用CPU（不要对许多元素使用！）

作为jQuery插件实现，它可能看起来像：

(function($){
  var watches = $();
  var timeout = 100;
  var awake = false;
  $.fn.watcher = function(option, value){
    if(typeof option == 'function'){
      value = option;
      option = undefined;
    }
    switch(option){
      case 'watch':
      case undefined:
        watches = watches.add(this);
        if(typeof value == 'function'){
          this.on("watcher.move", value);
        }
        if(!awake && this.length > 0){
          awake = true;
          setTimeout(watcher, timeout);
        }
        break;
      case 'unwatch':
        watches = watches.not(this)
        break;
      case 'timeout':
        if(arguments.length == 1){
          return timeout;
        } else {
          timeout = value;
        }
      default: throw "unknown option "+option;
    }
    return this;
  }

  function watcher(){
    watches.each(function(){
      var $this = $(this);
      var oldPos = $this.data("watcher.position");
      var newPos = $this.offset(); //relative to the document
      if(oldPos && (oldPos.top !== newPos.top || oldPos.left !== newPos.left)){
        $this.trigger("watcher.move");
      }
      $this.data("watcher.position", newPos);
    })
    if(watches.length){
      setTimeout(watcher, timeout);
    } else {
      awake = false;
    }
  }
})(jQuery)

用法示例：

$("#comp1")
  .watcher('timeout', 50)
  .watcher('watch')
  .on("watcher.move", function(){
    console.log("#comp1 has moved!")
  })

或者只是：

$("#comp1").watcher(function(){
  console.log("#comp1 has moved!")
})

此处测试：

---

但是，说真的，改变你的设计，这样你就不需要这个了

请提供更多信息和/或示例，说明问题

change

是针对完全不同的内容。当某物的位置发生变化时，很难发现所有情况。

$("#comp1").watcher(function(){
  console.log("#comp1 has moved!")
})