前端要持续监听事件的性能优化(节流/防抖),scroll方法为例。

以滚动事件为例吧,移动端要实现一个简单的滚动到底部加载下一页的需求,就需要监听页面的scroll事件了代码如图:

let timeOutFn = false; //

$(window).scroll(function () {  //监听窗口的滚动事件

    clearTimeOut(timeOutFn);     //100毫秒内仍然执行滚动就把需要执行的逻辑清除掉,停下来在执行具体函数

    timeOutFn = setTimeOut(function(){  //设置为100毫秒的延时
        //todo 
        calc()
    },100) 

}

//滚动时需要执行的代码
function calcFn(){
    //todo 计算判断的逻辑函数
}

从上面的代码可以延伸出,输入框的输入的建议显示之类的方法,有需要的话都可以进行一个比较简单的性能优化,比如onchange事件,等等。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章