快捷導(dǎo)航

JavaScript高級(jí)函數(shù)應(yīng)用之分時(shí)函數(shù)實(shí)例分析

更新時(shí)間：2018年08月03日 11:51:30 作者：咕咚蘿卜

這篇文章主要介紹了JavaScript高級(jí)函數(shù)應(yīng)用之分時(shí)函數(shù),結(jié)合實(shí)例形式分析了javascript通過合理分時(shí)函數(shù)應(yīng)用避免瀏覽器卡頓或假死的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript高級(jí)函數(shù)應(yīng)用之分時(shí)函數(shù)。分享給大家供大家參考，具體如下：

一、前提介紹：

某些函數(shù)是用戶主動(dòng)調(diào)用的，但因?yàn)橐恍┛陀^的原因，這些函數(shù)會(huì)嚴(yán)重影響頁面的性能。

二、應(yīng)用場景：

在短時(shí)間內(nèi)往頁面中大量添加DOM節(jié)點(diǎn)顯然會(huì)讓瀏覽器吃不消，往往會(huì)導(dǎo)致瀏覽器的卡頓甚至假死。

三、解決方案：

以上述添加節(jié)點(diǎn)的例子來說明問題，我們將創(chuàng)建節(jié)點(diǎn)的工作分批進(jìn)行，比如把1秒鐘創(chuàng)建1000個(gè)節(jié)點(diǎn)，改為每隔200毫秒創(chuàng)建8個(gè)節(jié)點(diǎn)。

四、實(shí)現(xiàn)代碼如下：

var timeChunk = function(ary, fn, count){
  var obj,t;
  var len = ary.length;
  var start = function(){
    for(var i=0;i<Math.min(count ||1, ary.length );i++){
      var obj = ary.shift();
      fn(obj);
    }
  };
  return function(){
    t = setInterval(function(){
      if(ary.length === 0){ //如果全部節(jié)點(diǎn)都已經(jīng)被創(chuàng)建好
        return clearInterval(t);
      }
      start();
    }, 200); //分批執(zhí)行的時(shí)間間隔，也可以用參數(shù)的形式傳入
  };
};

五、調(diào)用驗(yàn)證方法

var ary = ['aa','bb','cc',.....];
var renderFriendList = timeChunk( ary, function(n){
  var div = document.createElement('div');
  div.innerHTML = n;
  document.body.appendChild(div);
},8);
renderFriendList();

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS中國標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)化為年月日時(shí)分秒'yyyy-MM-dd hh:mm:ss'的示例詳解
這篇文章主要介紹了JS中國標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)化為年月日時(shí)分秒‘yyyy-MM-dd hh:mm:ss‘的相關(guān)知識(shí),通過示例代碼介紹了,Js各種時(shí)間轉(zhuǎn)換問題（YYYY-MM-DD 時(shí)間戳中國標(biāo)準(zhǔn)時(shí)間）,需要的朋友可以參考下
2024-02-02
淺談javascript語法和定時(shí)函數(shù)
初學(xué)者可能對(duì)Javascript的定時(shí)器有誤解，認(rèn)為它們是線程，其實(shí)Javascript是運(yùn)行于單線程中的，而定時(shí)器僅僅是計(jì)劃在未來的某個(gè)時(shí)間執(zhí)行，而具體的執(zhí)行時(shí)間是不能保證的，因?yàn)樵陧撁娴纳芷谥校煌臅r(shí)間可能有其它代碼在控制Javascript的里進(jìn)程。
2015-05-05
Bootstrap treeview實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)并添加快捷搜索功能
本文實(shí)現(xiàn)了運(yùn)用bootstrap treeview實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)，并且添加快捷搜索功能，需要的朋友參考下
2018-01-01
JavaScript函數(shù)防抖與函數(shù)節(jié)流的定義及使用詳解
這篇文章主要為大家詳細(xì)介紹一下JavaScript中函數(shù)防抖與函數(shù)節(jié)流的定義及使用，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JS有一定幫助，需要的可以參考一下
2022-08-08
關(guān)于js復(fù)制內(nèi)容到瀏覽器剪貼板報(bào)錯(cuò)：Cannot read properties of&n
這篇文章主要給大家介紹了關(guān)于js復(fù)制內(nèi)容到瀏覽器剪貼板報(bào)錯(cuò)：Cannot read properties of undefined (reading ‘writeText‘)的解決方案,文中給出了詳細(xì)的原因分析和解決方案,需要的朋友可以參考下
2024-01-01
js對(duì)象的復(fù)制繼承實(shí)例
這篇文章主要介紹了js對(duì)象的復(fù)制繼承用法,以一個(gè)較為簡單的實(shí)例分析了js對(duì)象復(fù)制繼承的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
js 動(dòng)態(tài)生成json對(duì)象、時(shí)時(shí)更新json對(duì)象的方法
下面小編就為大家?guī)硪黄猨s 動(dòng)態(tài)生成json對(duì)象、時(shí)時(shí)更新json對(duì)象的方法。小編覺的挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-12-12
BootStrap智能表單實(shí)戰(zhàn)系列(十一)級(jí)聯(lián)下拉的支持
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(十一)級(jí)聯(lián)下拉的支持的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
基于javascript實(shí)現(xiàn)按圓形排列DIV元素(二)
本篇文章主要介紹基于javascript實(shí)現(xiàn)按圓形排列DIV元素的方法，此文著重于介紹怎樣實(shí)現(xiàn)的按圓形排列DIV元素的運(yùn)動(dòng)原理和實(shí)現(xiàn)效果代碼，需要的朋友來看下吧
2016-12-12
18個(gè)高頻使用的JS工具方法總結(jié)
這篇文章主要為大家分享一下18個(gè)在項(xiàng)目中使用很高頻的JS工具方法，希望大家能夠知其然也知其所以然，不要只會(huì)調(diào)用?api，也要會(huì)寫?api，快跟隨小編一起學(xué)習(xí)一下吧
2022-04-04