如何在对象更改时创建 Jquery 事件

您可以触发自定义事件。

function changeProperty(obj, prop, value) {
  if (prop in obj && obj[prop] !== value) {
     obj[prop] = value;
     // trigger on document is just an example.
     $(document).trigger('PropertyChange', [obj, prop]);
  }
}

var myobject;
// use the function to change property.
changeProperty(myobject, 'property1', 'abc');
// bind this custom event
$(document).on('PropertyChange', function(obj, prop) {
  console.log(obj, prop);
});

我可以说一个解决方案。在很大程度上，这是一个非常容易解决的问题，没有 DOM 事件，使用 setTimeout（） 对我的元素进行递归检查。这个解决方案的问题在于它纯粹的膨胀和不断的 DOM 遍历，每秒检查我所选元素的属性。因此，鉴于此解决方案陷阱，我们可以使用一个名为 DOMAttrModified 的鲜为人知的 DOM 事件（您可以在此处阅读有关此事件和所有其他标准 DOM 事件的更多信息：http://www.w3.org/TR/DOM-Level-2-Events/events.html）

最佳解决方案

此事件很可能不常用，因为并非所有浏览器都支持它。也就是说，IE确实支持一个名为"propertychange"的类似事件，至少，如果我们处理所有其他不支持任何内容的浏览器（我正在看Chrome/Safari），我们总是可以回退到我们最初的setTimeout（）解决方案。您可以在此处查看浏览器和事件兼容性列表：http://www.quirksmode.org/dom/events/index.html

由于jQuery是当今开发人员事实上的首选Javascript库，我为它创建了一个插件，它模仿所有浏览器的DOMAttrModified事件。

法典

$.fn.watch = function(props, callback, timeout){
    if(!timeout)
        timeout = 10;
    return this.each(function(){
        var el      = $(this),
            func    = function(){ __check.call(this, el) },
            data    = { props:  props.split(","),
                        func:   callback,
                        vals:   [] };
        $.each(data.props, function(i) { data.vals[i] = el.css(data.props[i]); });
        el.data(data);
        if (typeof (this.onpropertychange) == "object"){
            el.bind("propertychange", callback);
        } else if ($.browser.mozilla){
            el.bind("DOMAttrModified", callback);
        } else {
            setInterval(func, timeout);
        }
    });
    function __check(el) {
        var data    = el.data(),
            changed = false,
            temp    = "";
        for(var i=0;i < data.props.length; i++) {
            temp = el.css(data.props[i]);
            if(data.vals[i] != temp){
                data.vals[i] = temp;
                changed = true;
                break;
            }
        }
        if(changed && data.func) {
            data.func.call(el, data);
        }
    }
}

初始化代码

jQuery(function($){
    $(".demo span").watch('width,height', function(){
        if(parseFloat($(this).width()) >= 150){
            $(this).css({'background':'green'});
        }
        if(parseFloat($(this).height()) >= 200){
            $(this).css({'background':'blue'});
        }
    });
    $('.demo a').toggle(function(){
        $('.demo span').animate({'width':'400px','height':'200px'}, 1000);
    }, function(){
        $('.demo span').css({'width':'50px','height':'50px','background':'red'});
    });
});

现场演示

此插件允许您指定要"监视"更改的属性。当其中一个属性发生更改时，它将触发您的回调函数。http://darcyclarke.me/dev/watch/

setInterval(function() {
  // Do something every 2 seconds
  $('#myObject').attr('anyAttribute',value);
}, 2000);

试试这个@Ryan

希望这会有所帮助。

示例代码

$("#myObject").bind("input propertychange", function (evt) {
    // If it's the propertychange event, make sure it's the value that changed.
    if (window.event && event.type == "propertychange" && event.propertyName != "value")
        //do whatever
    // or if you want to use .prop api to get the attribute
        // Do your thing here
    }, 2000)); <---- delay here 2 seconds
});

使用setInterval并根据以前检查的值数组检查属性值。如果他们更改了呼叫function...

var previousVals = [],
    checkinterval = setInterval(function(){
        for(var i in myobject) {
            if(/* comparison logic true */) valchanged(myobject[i]);
        }
    }, 4000); /* check every 4 seconds */

function valchanged(value) { /* ... do something */ }