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

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

一般情况下,如果碰到这样的面试题,防抖动机制,就能很好的解决,这方面最早的应用实践还是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. os.path.basename()

    返回path最后的文件名.如果path以/或\结尾,那么就会返回空值.即os.path.split(path)的第二个元素. >>> import os >>> p ...

  2. JS 常用的两个客户端输出方法

    document.write(str)   描述:在网页的<body>标记,输出str的内容.   document意思“文档”,就是整个网页了.   document是一个文档对象,代表 ...

  3. C#查找List 某一段数据

    public void SelectData() { List<int> r = new List<int>(); r.Add(); r.Add(); r.Add(); r.A ...

  4. <转>http协议 文件下载原理详解

    最近研究了一下关于文件下载的相关内容,觉得还是写些东西记下来比较好.起初只是想研究研究,但后来发现写个可重用性比较高的模块还是很有必要的,我想这也是大多数开发人员的习惯吧. 对于HTTP协议,向服务器 ...

  5. LINUX用户和用户组操作命令

    Id Finger Pwck 检查/etc/passwd配置文件内的信息与实际主文件夹是否存在,还可比较/etc/passwd和/etc/shadow的信息是否一致,另外如果/etc/passwd中的 ...

  6. LUA中的冒号、点和self

    在Lua编程中,经常会看到有时用点号定义一个table的成员函数,有时却用冒号,在调用的时候也是如此.那么点号和冒号在使用上有什么区别呢?它们与self之间又是什么样的关系呢?稍安勿躁,接下来谜底将一 ...

  7. Entity Framework Code First 模式-建立一对一联系

    使用的例子为教室(ClassRoom),教室里的多媒体设备(Device),一个教室里有一套多媒体设备,一套多媒体设备只放在一个教室里. 1.Data Annotations方式 需要在任意一方的主键 ...

  8. 内核下枚举进程 (二)ZwQuerySystemInformation

    说明: SYSTEM_INFORMATION_CLASS 的5号功能枚举进程信息.其是这个函数对应着ring3下的 NtQuerySystemInformation,但msdn上说win8以后ZwQu ...

  9. js怎样截取以'-'分割的字符串

    在日期2019-09-01,怎样截取年只要月和日,下面是主要代码 var aa = '2019-09-01'; var bb = aa.split('-'); console.log(bb);//打印 ...

  10. CSS - 选择器相关

    1. 标签选择器 /* 标签选择器 : 会将样式作用在当前网页所有的指定标签上 标签名 { 样式名1: 样式值1; 样式名2: 样式值2; ...... } */ table { width: 300 ...