0

この問題には本当に簡単な解決策があると確信しています。少なくとも、そうあるべきだと思われます。しかし、私はそれを見つけることができませんでした...

オブジェクト (DOM の一部ではない) があり、そのプロパティは定期的に更新されます。

var myobject;
//wait 10 seconds
myobject.property1 = "abc";

このプロパティが変更されたときにアクションをトリガーしたい (1 つだけではなく、多くの異なるプロパティ)。JQueryでこれを行うにはどうすればよいですか?

4

5 に答える 5

2

カスタム イベントをトリガーできます。

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);
});
于 2012-06-28T02:42:05.520 に答える
0

プロパティ値を使用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 */ }
于 2012-06-28T02:32:11.733 に答える
0

解決策について言えます。これは、大部分は、DOM イベントなしで、setTimeout() を使用して要素の再帰チェックを使用して解決する非常に簡単な問題です。このソリューションの問題は、選択した要素の属性を毎秒チェックするために、膨大な量と絶え間ない DOM 走査を行うことです。したがって、このソリューションの落とし穴に照らして、DOMAttrModified と呼ばれるあまり知られていない DOM イベントを使用できます (これと他のすべての標準 DOM イベントの詳細については、http ://www.w3.org/TR/DOM-Level- を参照してください)。 2-イベント/events.html )

最善の解決策

このイベントは、すべてのブラウザーでまだサポートされていないため、一般的には使用されていません。そうは言っても、IE は「propertychange」と呼ばれる同様のイベントをサポートしており、少なくとも、何もサポートしていない他のすべてのブラウザーを扱っている場合は、常に最初の setTimeout() ソリューションに頼ることができます (私はChrome/Safari を見ています)。ブラウザーとイベントの互換性のリストは、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'});
    });
});

ライブデモ

このプラグインを使用すると、変更を「監視」する属性を指定できます。属性の 1 つが変更されると、コールバック関数が起動されます。 http://darcyclarke.me/dev/watch/

于 2012-06-28T02:35:34.100 に答える
0 
setInterval(function() {
  // Do something every 2 seconds
  $('#myObject').attr('anyAttribute',value);
}, 2000);
于 2012-06-28T02:36:54.443 に答える
0

この@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
});
于 2012-06-28T02:37:06.687 に答える