javascript - Notifications - Alternate to Object.observe? -

trying build small component sends notifications via notifications object on small web app. so, once private message has been received in group, if value of field has incremented or changed, display notification.

this works fine if refresh page not running asynchronously.

with object.observe() being deprecated, please explain how implement this? don't quite understand how proxies.

thanks lot!!

shortened brevity

var mygroup = 0; var notificationcount = [];  notificationcount.push({'mygroup': mygroup}); localstorage.setitem('notificationcount', json.stringify(notificationcount)); var storedcounts = json.parse(localstorage.getitem("notificationcount");  settimeout(function() {     var newcountmygroup = parseint($('.mygroup .wrapper').text());      if(newcountmygroup > 0 && storedcounts[0].mygroup !== newcountmygroup) {         notify('new post in groups', 'linkhere')     } }, 800);  function notify(alertmessage, alertlink) {     if(notification.permission !== "granted") {         notification.requestpermission();     } else {         var notificationmygroup = new notification(...);         notificationmygroup.onclick = function(){             window.open(alertlink);         }     } } 

from comment:

i want notification display when div's value changes due message. settimeout function isn't running properly. desired outcome run async message received. works once refresh page.

i read past 3 times, current code schedules single timed callback on page load 800ms later. settimeout sets one-off timer. if want repeated, use setinterval instead.

so if want polling, setinterval instead of settimeout it.

if want without polling, don't need object.observe or proxy because want observe dom element (the div), not javascript object. fortunately, there's tool that: mutation observers. watch childlist changes .mygroup elements, tell when new .wrapper added, and/or watch characterdata/childlist notifications on .wrapper elements, tell when text changed.

here's quick example of both, see comments:

var wrapperid = 0;    // our function when .mygroup's child list changes  function mygroupmodificationcallback(records) {    // (your real code go here)    console.log("saw modification " + records[0].target.id);    // if want watch wrappers, you'd set them calling hookupwrapperobservers    hookupwrapperobservers();  }    // hook obervers  `.mygroup` elements don't have them yet  function hookupmygroupobservers() {    $(".mygroup").each(function() {      var group = $(this);      var ob = group.data("ob");      if (!ob) {        ob = new mutationobserver(mygroupmodificationcallback);        ob.observe(this, {          childlist: true        });        group.data("ob", ob);      }    });  }    // our function when .wrapper's character data changes  function wrappernotificationcallback(records) {    // (your real code go here. note may multiple records same wrapper.)    var changes = object.create(null);    records.foreach(function(record) {      changes[record.target.id] = record.target;    });    object.keys(changes).foreach(function(id) {      console.log(id + " changed: " + $(changes[id]).text());    });  }    // hook observers .wrapper elements don't have them yet  function hookupwrapperobservers() {    $(".mygroup .wrapper").each(function() {      var wrapper = $(this);      var ob = wrapper.data("ob");      if (!ob) {        var ob = new mutationobserver(wrappernotificationcallback);        ob.observe(this, {          characterdata: true,          childlist: true        });        wrapper.data("ob", ob);        console.log(this.id + " received: " + $(this).text());      }    });  }    // initial setup  hookupmygroupobservers();  hookupwrapperobservers();    // testing/demo: add 2 wrappers first group , 1  // second update 3 of them 3 times, stop  settimeout(function() {    addwrapper("#group1");    settimeout(function() {      addwrapper("#group2");      settimeout(function() {        addwrapper("#group1");      }, 300);    }, 300);      function addwrapper(selector) {      var wrapper = $("<div class=wrapper>1</div>");      wrapper[0].id = "wrapper" + (++wrapperid);      $(selector).append(wrapper);      var counter = 0;      var timer = setinterval(function() {        wrapper.text(parseint(wrapper.text()) + 1);        if (++counter == 3) {          clearinterval(timer);        }      }, 300);    }  }, 300);

<div class="mygroup" id="group1"></div>  <div class="mygroup" id="group2"></div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

mutation observer support good in modern browsers. ie9 , ie10 implemented previous mutation events, , there polyfills use events provide subset of observer behavior on browers. ie8 , earlier, you'll need poll.