页面滚动到某一位置 侧导航显示并且执行函数

Question

问题描述

需求是页面滚动到某一位置 侧导航显示并且执行一个函数 函数是根据时间进行dom操作 现在问题是当函数执行时候滚动滑轮 就会加快时间 每个dom操作都会加快

问题出现的环境背景及自己尝试过哪些方法

刚开始以为是跟节流函数有关系试过之后还是有问题

相关代码

// window.onscroll = throttle(function () {

let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if(scrollTop >= 360){
    inter = setInterval("fun()",200);
    $('#rightnav').fadeIn(500);
}else{    
    $('#rightnav').fadeOut(500);    
}  

},800)
var t = 10.2;
function fun(){
if(t>-1){t=t-0.2;}
console.log(t)
if(t>=10.01){

$('.contact').addClass('black');

}else if(t>=9.81){

$('.contact').removeClass('black');
$('.contact').addClass('white');

}else if(t>=9.61){

$('.contact').removeClass('white');
$('.contact').addClass('black');

}
else if(t>=9.41){

$('.contact').removeClass('black');
$('.contact').addClass('white');

}else if(t>=9.21){

$('.contact').removeClass('white');
$('.contact').addClass('black');

}
else if(t>=9.01){

$('.contact').removeClass('black');
$('.contact').addClass('white');

}
else if(t>=8.81){

$('.contact').removeClass('white');
$('.contact').addClass('smile1');

}else if(t>=8.61){

$('.contact').removeClass('smile1');
$('.contact').addClass('smile2');
$('.contact span').css('display','block');
$('.contact-duihua').css('display','block')

}else if(t>=8.41){

var index=0;

    var word='点击此处';
    function type(){
        document.getElementById("clickthis").innerText = word.substring(0,index++);
    }
    setInterval(type, 50);
}else if(t>=8.21){

var index=0;

    var word='我们马上联系您';
    function type1(){
        document.getElementById("ournow").innerText = word.substring(0,index++);
    }
    setInterval(type1, 50);
}else if(t>=0.61){

// console.log('等待')
$('.contact span').css('display','block');

}else if(t>=0.41){

$('.contact').removeClass('smile2');
$('.contact').addClass('smile1');

}else if(t>=0.21){

$('.contact-duihua').hide(200);
$('.contact span').hide(200);

}else if(t<=0){

clearInterval(inter);
// console.log('da'+t)

}

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

每次进来先停掉计时器啊

Answer 2

setInterval 换成 setTimeout

Answer 3

相当于每次滚动事件触发的时候都重新注册了一个 setInterval 事件，不是很明白为什么你要在节流 800ms 的滚动事件里再添加 200ms的 Interval