jQuery页面滚动事件逻辑——如何节流

jQuery page scroll event logic -- how to throttle

本文关键字：何节流 事件 滚动 jQuery      更新时间：2023-09-26

我有一些jQuery侦听器设置如下：

$(document).scroll(function() {
    if( $(this).scrollTop() < change1) { 
            updateBarChart('valuem', 'opencomparison');
        } else if ( $(this).scrollTop() > change1 && $(this).scrollTop() < change2) { 
            updateBarChart('valuef', 'opencomparison');
        } else if ($(this).scrollTop() > change2) {
    updateBarChart('valuem', 'remove')
        //updateSteamChart('','steam')
}
});

够直接的。某些图表在滚动更改时会更新。

我的问题是，这发送了太多的功能更新。我想知道是否有一种方法可以限制.woll（function（）｛｝）。这样，触发的事件更新就会更少。

想法？

实现节流的一个相当简单的方法可能是添加一个针对随机值的检查，以便它只触发一定百分比的时间：

$(document).scroll(function() {
    //Only fires 10% of the time
    if (Math.random() < 0.1) {
        if( $(this).scrollTop() < change1) { 
            updateBarChart('valuem', 'opencomparison');
        } else if ( $(this).scrollTop() > change1 && $(this).scrollTop() < change2) { 
            updateBarChart('valuef', 'opencomparison');
        } else if ($(this).scrollTop() > change2) {
            updateBarChart('valuem', 'remove');
        }
    }
});

或者，你可以使用计时器，使其每x毫秒只触发一次：

$(document).scroll(function() {
    //Only fires at most once every half-second
    if (timer > 500) {
        timer = 0;
        if( $(this).scrollTop() < change1) { 
            updateBarChart('valuem', 'opencomparison');
        } else if ( $(this).scrollTop() > change1 && $(this).scrollTop() < change2) { 
            updateBarChart('valuef', 'opencomparison');
        } else if ($(this).scrollTop() > change2) {
            updateBarChart('valuem', 'remove');
        }
    }
});
var timer = 0;
setInterval(function () { timer += 50; }, 50);
相关文章：