用jquery || js实现滚动条防抖与页面锚点的简单方法_jq 控制滚动条有抖动

前言：我们在网页定义滚动事件的时候经常遇到滚动之后执行非常多次的方法，因为滚动的时候

 $(window).scroll(function () {})
 //方法是一直执行的
1
2

所以我们需要做一个防抖或者节流

1、定义方法

//滚动条滚动之后要执行的方法
function handlerFunc() {
    console.log($(window).scrollTop())
    if ($(window).scrollTop() >= 100 && $(window).scrollTop() < 400) {
        console.log("over")
        $('#toBanner1')[0].click();
        //去锚点位置
        // $('html,body').animate({scrollTop:$('#banner1').offset().top}, 1000);
    }
}

//简单的防抖函数
function debounce(func, wait, immediate) {
    //定时器变量
    var timeout;
    return function () {
        //每次触发scrolle，先清除定时器
        clearTimeout(timeout);
        //指定多少秒后触发事件操作handler
        timeout = setTimeout(func, wait);
    };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2、在jquery初始化里面绑定滚动函数

$(function () {
    window.addEventListener('scroll', debounce(handlerFunc, 500));
});
1
2
3