js实现页面防抖动

本文主要是介绍js实现页面防抖动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题：针对频繁触发scoll resize绑定的事件函数，有可能短时间多次触发时事件，影响性能

思路：多个函数调用合成一次，给定时间后仅调用最后一次

// 包装事件的debounce函数

function debounce(func, delay){

    let timer = null;    

    return function(){

         let context = this; // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量

        let args = arguments; 

        clearTimeout(timer);

        timer = setTimeout(function(){

                func().apply(context, args);

        }, delay)

    }

}

// 当用户滚动时被调用的函数

function foo(){

    cosnole.log("todo somethind");

 }

// 元素绑定scoll事件，触发包装函数debounce

let elem = document.getElementById('container');

elem.addEventListener('scroll', debounce(foo, 2000));

这篇关于js实现页面防抖动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---