javascript - changing to Web Workers from AJAX setInterval -
i have script (below) asynchronously updates markup on setinterval
; markup generated jquery xml data. attempt @ creating ui in users can view see changes happen xml data in real-time. however, seeming round way of acheiving desired effect compared web workers api; finding out ajax script , setinterval
function unreliable; script appears freeze or not respond @ initial loads , after running long periods of time points . how can modify code use workers instead of ajax or setinterval
?
setinterval(refreshxml, 1500); function refreshxml() { var req = $.get('administration/data/people.xml'); req.done(function(xml) { // update global xml variable used create buttons. window.peoplexml = xml; // clear existing buttons. $('#loadme').empty(); // display button each xml person entity. $(xml).find('fullname').each(function(index) { var fullname = $(this).text(); $('<button>', { 'class': 'mybutton', value: $(this).siblings('id').text(), text: fullname }).appendto('#loadme'); }); // update person divs visible. $('#toadme .person').each(function() { // grabs id data-person-id set earlier. var id = $(this).data('person-id'); show_person(id); }); }); } function show_person(id) { $('#person-detail-' + id).remove(); get_person(id).appendto('#toadme'); } function get_person(id) { var $person = $(window.peoplexml).find('id:contains(' + id + ')').parent(); var $div = $('<div>', { 'class': 'person', 'data-person-id': id, id: 'person-detail-' + id }); $('<h1>', { text: $person.find('firstname').text() }).appendto($div); $('<h1>', { text: $person.find('lastname').text() }).appendto($div); $('<h1>', { text: $person.find('age').text() }).appendto($div); $('<h1>', { text: $person.find('hometown').text() }).appendto($div); $('<h1>', { text: $person.find('job').text() }).appendto($div); return $div; } $(document).on('click', '.mybutton', function() { $('#toadme').empty(); show_person(this.value); });
the name of above script home.js , here example of index page (index.html) , worker (my_task.js):
// index.html <script> var myworker = new worker("my_task.js"); myworker.onmessage = function (oevent) { console.log("worker said : " + oevent.data); }; myworker.postmessage("ali"); // my_task.js postmessage("i\'m working before postmessage(\'ali\')."); onmessage = function (oevent) { postmessage("hi " + oevent.data); };
how can implement home.js in way in index.html , my_task.js implemented? ton, looking way starting using workers next level since learned ajax. also, know possibly seen broad question willing improve question upon request , suggestions.
Comments
Post a Comment