季诗筱的博客

分享个人公众号“季诗筱”

【JavaScript 高级技巧】防篡改对象+高级定时器

因为任何对象都可以被在同一环境中运行的代码修改,开发人员很可能会意外的修改别人的代码,甚至会用不兼容的功能重写原生对象。而防篡改对象就是一个可以解决这个问题的方法。

一、防篡改对象

1、不可扩展对象

Object.preventExtensions( ):不能给对象添加新属性和方法了;
Object.isExtensible( ):确定对象是否可扩展
        虽然不能给对象加新成员,但是已有的成员不受影响,仍然可以修改和删除已有的成员。

2、密封的对象

Object.seal( ):将对象设置为密封对象,密封对象不可扩展,也不能删除已有属性和方法,但属性可修改
Object.isSealed( ):确定对象是否被密封了。

3、冻结的对象

Object.freeze( ):将对象设置为冻结对象,冻结对象不可扩展,也是密封的,而且对象属性不可修改
Object.isFrozen( ):去顶对象是否被冻结了。

二、高级定时器

关于定时器,一个很重要的问题是:指定的时间间隔表示何时将定时器的代码添加到队列,而不是何时执行代码。

先说一下setTimeout( )和setInterval( ):
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作;setInterval可以使一段代码每过指定时间就运行一次。
setTimeout(“function”,time) :返回一个ID,可以用作清除此计时器。
setInterval(“function”,time) :返回一个ID,作为clearInterval()的参数。
SetInterval为自动重复,setTimeout不会重复。

1、重复的定时器

setInterval()有两个问题:
(1)某些间隔会被跳过;
(2)多个定时器的代码执行之间的间隔可能会比预期的小。
解决办法:
链式调用setTimeout(),每次函数执行的时候都创建一个新的定时器,这样在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何确实的间隔。

setTimeout(function(){
    //code
    setTimeout(arguments.callee,interval)
},interval)

2、数组分块

脚本长时间运行的问题通常是由以下原因造成:
(1)过长的/过深嵌套的函数调用
(2)进行大量处理的循环
如果 处理不需要同步完成,而数据也不需要顺序完成,那么就可以使用数组分块的方法,用计时器来分隔循环。

数组分块的基本思路:
为要处理的项目创建一个队列,然后使用定时器取出下一个要处理的项目进行处理,接着再设置另一个定时器。

function arrayChunk (array,process,context,delay) {
    if(delay) {
        interval = delay;
    } else {
        interval = 100;
    }
    setTimeout(function () {
        var item = array.shift();//取出下一个条目
        process.call(context,item);//处理下一个条目

        if (array.length > 0) {//若还有条目,则设置另一个定时器
            setTimeout(arguments.callee,interval);
        }
    },interval);
}
var data = ["Hello","I","am","vickygu",",","I","am","so","glad","today"];
    function printValue (item) {
        var arrayDiv = document.getElementById("arrayDiv");
        arrayDiv.innerHTML += item + " ";
    }
    arrayChunk(data,printValue,null,200);

这样每隔200ms 就会打印出一个单词。

3、函数节流

上一篇博客

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/XIAOZHUXMEN/article/details/51558978
文章标签: javascript
个人分类: javascript
上一篇【JavaScript】函数节流
下一篇【webpack】使用webpack进行ES6开发
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭