处理事件节流方法

一、setTimeout()

通过给setTimeout()设置一个合理的值,就能够在即时返馈与较高性能之间达成一个合理的折中。

$(document).ready(function() {
    var timer = 0;

    $(window).scroll(function() {
        if (!timer) {
            timer = setTimeout(function() {
                checkScrollPosition();
                timer = 0;
            }, 250);
        }
    }).trigger('scroll');
});

我 们 没 有 直 接 将 checkScrollPosition() 设 置 为 scroll 事 件 处 理 程 序 , 而 是 使 用JavaScript的setTimeout函数,延迟250毫秒再调用它。更重要的是,我们会在执行任何代码之前先检查当前运行的计时器。因为检查一个简单变量的值速度极快,所以对事件处理程序的大多数调用都几乎能够立即返回。而对checkScrollPosition()函数的调用只会在计时器结束时才会发生,通常每次都要等250毫秒。

二、计时器

根据被节流的操作的特点,以及与页面的典型交互方式,我们可以直接给页面创建一个计时器,而不是等事件开始时再创建。

$(document).ready(function() {
    var scrolled = false;

    $(window).scroll(function() {
        scrolled = true;
    });

    setInterval(function() {
        if (scrolled) {
            checkScrollPosition();
            scrolled = false;
        }
    }, 250);

    checkScrollPosition();
});

与前面的节流代码不同,这个轮询式的方案会调用JavaScript的setInterval()函数,每250毫秒检查一次scrolled变量的状态。不管什么时候发生滚动事件, scrolled都会被设置为true,以确保在下一次轮询时调用checkScrollPosition()。

三、消除抖动

在频繁重复的事件发生期间限制处理次数的第三种技术叫消 除 抖动(debouncing)。这种技术是以电子开关重复发送信号必需的后处理技术命名的,可以确保在发生多个事件的情况下,最终只会有一个事件实际地起作用。

var searchTimeout,
    searchDelay = 300;
$('#title').on('keyup', function(event) {
    clearTimeout(searchTimeout);

    searchTimeout = setTimeout(function() {
        $ajaxForm.triggerHandler('submit');// 发送Ajax请求
    }, searchDelay);
}

前面的代码,我们需要scroll处理程序随着滚动的继续多次发挥作用。而在这里,我们希望keyup行为在输入完成后只发生一次。为此,我们在用户按下第一个键的时候设置一个JavaScript计时器,然后跟踪该计时器。随后的每一次击键动作都会重置该计时器,只有用户停止击键的时间超过预定的300毫秒后,才会触发submit处理程序并发送Ajax请求。

注:以上代码节选自《jQuery基础教程第4版》一书。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值