节流事件

3

有一些事件是会频繁触发的,比如scroll resize mousemove keyup
如果在这些事件上绑定函数,并且这些函数要进行耗性能的计算,那么会导致页面忽急忽缓,反应迟钝,这时就需要使用节流事件来控制函数被触发的频率。

function handler() {
    // 处理一些耗性能的计算
    // 或者发送ajax请求

    console.log('2333');
}

$(window).scroll(handler); // 反复触发handler,影响性能

方法一 setTimeout

var timer = 0;

$(window).scroll(function() {
    if (!timer) {
        timer = setTimeout(function() {
            handler();
            timer = 0;
        }, 1000);
    }
});

方法二 setInterval

// scroll虽然绑定了一个会频繁触发的函数,但是该函数只是改变scrolled的值,不会影响性能

var scrolled = false;

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

setInterval(function() {
    if (scrolled) {
        handler();
        scrolled = false;
    }
}, 1000);

想象一个场景:实时搜索

在输入框输入关键词后就要马上显示结果,通常做法是在keyup上绑定handler处理函数,发送ajax请求。但是如果用户输入速度很快,那么keyup会触发多次,发送多个ajax请求,而我们只是想要在用户停止输入的时间超过1s后才发送ajax

这和前面的scroll事件又有些不同,在这里我只想handler函数在keyup触发后执行一次
前面两种方法只是减少了handler()触发的频率,但是仍然会触发多次

方法三 clearTimeout

var searchTimeout = null;
$('#input').on('keyup', function(event) {
    //每次keyup时直接取消上次计时器,只有当keyup超过1s时才执行handler
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        handler();
    }, 1000);
});

参考:《jQuery基础教程》

你可能感兴趣的

载入中...