HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开源代码 查看内容

节流事件

2016-11-9 10:33| 发布者: microHTML| 查看: 437| 评论: 0|来自: segmentfault

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

有一些事件是会频繁触发的,比如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基础教程》


原文链接:https://segmentfault.com/a/1190000007421282

原作者:深红⑤


本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系站长QQ:2601929995,我们会在第一时间进行处理!

投稿: admin@html5cn.org


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-21 16:26

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部