Rumah > hujung hadapan web > tutorial js > js使用分时函数步骤详解

js使用分时函数步骤详解

php中世界最好的语言
Lepaskan: 2018-04-28 09:47:46
asal
1556 orang telah melayarinya

这次给大家带来js使用分时函数步骤详解,js使用分时函数的注意事项有哪些,下面就是实战案例,一起来看一下。

函数节流的原理是:延迟当前函数的执行,如果该次延迟还没有完成,那么忽略接下来该函数的请求。也就是说会忽掉很多函数请求。

在一些开发场景中,我们可能会一次性向文档中注入上千个节点,在短时间内向浏览器中大量添加DOM节点可能会让浏览器吃不消,结果往往会让浏览器卡顿或吃不消,解决方案之一便是使用分时函数(timeChunk)。

timeChunk分时函数让创建节点的工作分批进行,比如一秒钟创建1000个节点,改为每个200ms创建10个节点。具体timeChunk函数封装如下:

function timeChunk( arr, fn, count){//arr 数组 fn操作函数 count每次操作数量
  var obj,
    t;
  var start = function(){
    var len = Math.min(count||1,arr.length);
    for(var i=0; i < len; i++){
      obj = arr.shift();
      fn(obj)
    }
  };
  return function(interval){
    t = setInterval(function(){
      if(arr.length==0){
        return clearInterval(t)
      };
      start();
    },interval||200)
  }
}
Salin selepas log masuk

应用:

加入我们要在文档中添加1000个节点,可以利用timeChunk分时函数每200ms连续添加20个节点。

var arr = [];
for(var i = 1; i <= 1000; i++){
  arr.push(i)
}
var renderLists = timeChunk(arr,function(i){
  var p = document.createElement('p');
  p.innerHTML = i;
  document.body.appendChild(p);
},20);
renderLists(200);
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Vue项目引入icon步骤详解

JS里如何验证E-mail正确地址

Atas ialah kandungan terperinci js使用分时函数步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan