这道题目经常与事件触发器同时存在,为了考察面试者在一些具体业务流程上(信息流,搜索框输入查询)等,能否综合的考虑实现思路。

题目:在某些信息列表中一般采用瀑布流,滚动一屏时加载相应的数据,请思考如何避免连续下拉时而产生的问题(可能是页面崩溃,也可能是巨卡无比)。

一般情况下,如果碰到这样的面试题,防抖动机制,就能很好的解决,这方面最早的应用实践还是Twitter,开发者写了一篇博客,详细的阐述了如何解决这样的问题。那么,说到防抖动,其核心内涵在于延迟处理,也就是将一系列的事件处理程序全部延迟,保障推送进来的第一次事件处理。

event.on('scroll', function(e){    
   var fun;
   return function(){
       if(fun) clearTimeout(fun);
fun = setTimeout(function(){
           // console.log('1')
},500);
}
}());

这是最常见的一种方式,如果scroll的次数较多时,可以先将真实的函数放置在定时器中。

接下来我们将它抽象一下:

function de(something,delay){    
   var fun;
   return function(){
       if(fun) clearTimeout(fun);
fun = setTimeout(function(){
           something();
},delay);
}
}
function scrollToList(){ }
event.on('scroll', de(scrollToList,1000))
event.on('scroll', de(scrollToList,2000))

显然这是一个弱爆了的处理,那有没有更好的方式呢?有,比如节流。

JS防抖动的更多相关文章

  1. js:防抖动与节流

    http://blog.csdn.net/crystal6918/article/details/62236730

  2. js:防抖动与节流【转载】

    源文:https://blog.csdn.net/crystal6918/article/details/62236730#reply <!DOCTYPE html> <html l ...

  3. js点击事件代理时切换图片如何防抖动

    由于图片的加载速度比较慢,我们可以直接用64base对图片进行编码,把编码加在图片的url中~~~这样加载会快一些,也不会有切换图片时出现的抖动效果

  4. 关于js节流函数throttle和防抖动debounce

    废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...

  5. js动画性能提升笔记

    JavaScript动画的性能并不亚于CSS动画.因此,如果使用了现代的动画库,例如Velocity,那么动画引擎的性能将不再是app的瓶颈,构成瓶颈的只有代码. 网络性能相关 动画是浏览器运行中资源 ...

  6. html加载js那些事

    浏览器通过内置的JavaScript引擎,读取网页中的代码,对其处理后运行. JavaScript代码嵌入网页的方法 在网页中嵌入JavaScript代码有多种方法. 直接添加代码块 通过script ...

  7. 图片懒加载 echo.js

    (function (root, factory) { if (typeof define === 'function' && define.amd) { define(functio ...

  8. debounce(防抖动函数)

    短时间内不重复触发一个事件 设置一个门槛值,表示两次 Ajax 通信的最小间隔时间.如果在间隔时间内,发生新的keydown事件,则不触发 Ajax 通信,并且重新开始计时.如果过了指定时间,没有发生 ...

  9. 延迟加载图片控件--echo.js

    echo.js的github地址:https://github.com/toddmotto/echo   echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...

随机推荐

  1. hysbz3676 回文串 回文自动机

    回文自动机模板题 头铁了一下午hdu6599,最后发现自己的板有问题 先放这里一个正确性得到基本确认的板,过两天肝hdu6599 #pragma GCC optimize(2) #include< ...

  2. Vue项目组织规范

    目录 一.项目结构的核心思想 二.项目目录结构 三.资源路径编译规则 四.index.html 五.build目录 和 config目录 六.public目录 七.static 目录 八.src目录结 ...

  3. Eclipse_断点设置不起作用

    在使用Ecplise进行代码调试的时候,发现打了断点,却一直不进入断点,也不会进取断点调试模式,找了很久答案,之前就发现断点的样子有些奇怪,现在看来,还真是这个原因造成的. 只要不跳过断点快捷键(Ct ...

  4. pip install mysql-python报错1. Unable to find vcvarsall.bat 2 fatal error C1083: Cannot open include file: 'config-win.h': No such file or directory 3.error: command 'mt.exe' failed with exit statu

    最近在安装mysql -python 时报错折腾了半天,通过以下方法解决: 1. pip install mysql-python报错 Unable to find vcvarsall.bat (参考 ...

  5. php断点续传之文件上传与文件下载

    下载: 原理: Http头的 Range.Content-Range()未启用单点登录GerenalRequest URL: http://www.demotest.com/php/fileDownl ...

  6. linux常用软连接使用ln -s

    [软连接]另外一种连接称之为符号连接(Symbolic Link),也叫软连接.软链接文件有类似于Windows的快捷方式.它实际上是一个特殊的文件.在符号连接中,文件实际上是一个文本文件,其中包含的 ...

  7. [Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法

    解决方法import Vue from "vue"; 默认引入的文件是 vue/dist/vue.runtime.common.js.这个可以在node_modules/vue/p ...

  8. JavaScript设置body高度为浏览器高度的方法

    document.getElementsByTagName('body')[0].style.height = window.innerHeight+'px';

  9. Django常用组件之分页器

    目录 循环插入数据测试 实现分页器 视图层使用 模板层使用 循环插入数据测试 # ORM 帮我们提供了循环插入数据更快捷的方法: book_list = [] for i in range(1000) ...

  10. /usr/lib/gcc/x86_64-linux-gnu/5/../../../x86_64-linux-gnu/crt1.o:在函数‘_start’中: (.text+0x20):对‘main’未定义的引用

    原因是新建了一个可执行的函数,里面却没有main函数,加上main函数即可