咦？浏览器又崩了？再试试这个呢！

Posted 2021-03-04 hellomryk

由于连续进行过多的dom操作，有时候会导致浏览器运行崩溃，尤其是在ie中使用onrise事件处理的程序中有dom操作，高频的修改可能会导致浏览器崩溃，为了绕开这个问题，可以用定时器对函数进行节流。

当别人问你，同学说一下函数节流吧？
你可以告诉他，某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码，当第二次调用该函数时，他会清除第一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

let processor = {
    timeoutId:null,
    //实际进行处理的方法
    performPrcessing:function() {
        //实际执行的代码
    }，
    
    //初始处理调用的方法
    process:function() {
        clearTimeout(this.timeoutId);
        
        let that = this;
        this.timeoutId = setTimeout(function() {
            that.performPrcessing();
        },100)
    }
}

在这里创建一个processor对象，对象还有两个方法process和performProcessing(),前者是初始化任何处理所必须调用的，后者则是实际进行应完成的处理。当调用了process();第一步是清除存好的timeoutId，来阻止之前的调用被执行。然后创建一个新的定时器调用performProcessing(),由于setTimeout中用到的函数环境总是window，所以有必要保存this的引用方便用。

时间间隔100ms，表示最后一次调用process(),至少100ms后才会调用performProcessing(),所以如果100ms之内调用了process()共20次，performProcessing()仍只会被调用一次。

以后可以调用下面这个函数做到，定时器的自动设置和清除

function throttle(method,context) {
    clearTimeout(method.tid);
    method.tId = setTimeout(function(){
        method.call(context);
    },100)
}

如又一个div需要保持它的宽度始终等于高度：

window.onresize = function() {
    let div = document.getElementById(‘myDiv‘);
    div.style.height = div.offsetWidth + ‘px‘;
}

首先计算offsetwidth属性，css复杂的话，计算量会很大 其次高度的变化，会造成页面的reflow，这又会造成大计算量。 这时就可用throttle函数

function resizeDiv() {
    let div = document.getElementById(‘myDiv‘);
    div.style.height = div.offsetWidth + ‘px‘
}

window.onresize = function() {
    throttle(resizeDiv)
}

注意传入的的是resizeDiv不是resizeDiv(),多数情况下，用户是感受不到变化的，但是浏览器会节省大量运算。

扫码加群，每日更新一篇前端技术文章一起成长。