如何监听页面 DOM 变动并高效响应

'attributes': true,

'subtree': true

}

需求是如许的：在一个包含懒加载资本以及动态 DOM 元素生成的页面中，须要针对页面中存在的元素添加属性显示标签。

咦?页面往下拉一小点就触发了 observer 几十次?如许 DOM 哪吃得消啊，查看了页面的更改记录发明每次新进的资本底层都调用了 Node.insertBefore() 办法…

再聊聊 JavaScript 中的截流/撙节函数

如今碰到的一个麻烦是， DOM 更改太频繁了，如不雅每次更改都监听那真是太消费资本了。一个简单的解决办法是我就放弃监听了，而采取 setInterval 办法准时履行更新逻辑。是的，固然办法原始了一点，然则机能上比 Observer “改进”了不少。

这个时刻，又来了师兄的助攻：“用用截流函数”。记起之前看《JavaScript 说话精华精辟》的时刻看到是用 setTimeout 办法自调用来解决 setInteval 的频繁履行吃资本的现象，不知道两者是不是有接洽关系。网上一查发明有两个“jie流函数”。需求来自于这里：

在前端开辟中，页面有时会绑定scroll或resize事宜等频繁触发的事宜，也就意味着在正常的操作之内，会多次调用绑定的法度榜样，然而有些时刻javascript须要处理的工作特别多，频繁出发就会导致机能降低、成页面卡顿甚至是浏览器奔溃。

如不雅反复应用 setTimeout 和 clearTimeout 办法，我们似乎可以解决这个频繁触发的履行。每次事宜触发的时刻我起首断定一下当前有没有一个 setTimeout 准时器，如不雅有的话我们先将它清除，然后再新建一个 setTimeout 准时器来延迟我的响应行动。如许听上去还不错，因为我们每次都不急速履行我们的响应，而频繁触发过程我们又能保持响应函数一向存在(且只存在一个)，除了话苄些延迟响应外，没什么不好的。是的┞封就是截流函数(debounce)，有一篇博客用这个小故事介绍它：

形像的比方是橡皮球。如不雅手指按住橡皮球不放，它就一向受力，不克不及反弹起来，直到松手。debounce 的存眷点是余暇的距离时光。

在我的营业中，在 observer 实例中调用下面写的┞封个截流函数就可以啦

/** 
 
* fn 履行函数 
 
* context 绑定高低文 
 
* timeout 延时数值 
 
**/ 
 
let debounce = function(fn, context, timeout) { 
 
let timer; 
 
     
 
    // 应用闭包将内容传递出去 
 
return function() { 
 
  if (timer) { 
 
    // 清除准时器 
 
    clearTimeout(timer); 
 
  } 
 
  // 设置一个新的准时器 
 
  timer = setTimeout(function(){ 
 
  fn.apply(context, arguments) 
 
  }, timeout); 
 
 } 
 
}

当然，解决了本身的问题，但还有一个概念没有说到——“撙节函数”。同一篇博文里也应用了一个例子来解释它：

形像的比方是水龙头或机枪，你可以控制它的流量或频率。throttle 的存眷点是持续的履行距离时光。

函数撙节的道理也挺简单，一样照样准时器。当我触发一个时光时，先setTimout让这个事宜延迟一会再履行，如不雅在这个时光距离内又触发了事宜，那我们就清除本来的准时器，再setTimeout一个新的准时器延迟一会履行。函数撙节的出发点，就是让一个函数不要履行得太频繁，削减一些过快的调用来撙节。这里用 AlloyTeam 的撙节代码实现来解释：

// 参数同上 
 	
			 2/3   首页 上一页 1 2 3 下一页 尾页	
			

　　推荐阅读
　　视频监控在智慧城市建设中的应用
            
            2015年全国两会上提出了“互联网+”概念使得聪明城市家当的搭建迎来了前所未竽暌剐的成长机会。中国在聪明城市上的投入早已跨越5000亿元，估计将来投资会上升到1.1万亿元，聪明>>>详细阅读


本文标题：如何监听页面 DOM 变动并高效响应
地址：http://www.17bianji.com/lsqh/36660.html
 1/2    1