javascript - Debounce html document height on content change -

assume viewport 100×100 (width × height), document empty, scroll position (0,0) (x,y).

1. body.appendchild element of size 100×200
2. now scroll (0,100) manually
3. some javascript removes , body.appendchilds b (100×50)
4. the browser detects total document height 50 , scrolls (0,0)
5. some time passes (~150ms)
6. some javascript removes b , body.appendchilds c (100×200 again)

now browser still scrolled @ 0,0. i'm looking solution/library/jqueryplugin (nothing have insert @ 3 , 6) prevent (4) happening custom defined threshold (in case ~150ms).

this fiddle blocks scrollbar 500 seconds when height of element changes

$(document).on('click', function(e) {     var elementclone = $('.element').clone();     var currentheight = $('.element').height();     var currentwinheight = $(document).height();      $('body, html').css({         height: currentheight     });      $('.element').remove();     var randomheight = math.random() * 1000;     elementclone.css({         height: randomheight     }).text('height: ' + randomheight).appendto('body');     window.settimeout( function() {         $('body, html').css({             height: 'auto'          });     }, 500)     e.preventdefault(); });