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

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

一般情况下,如果碰到这样的面试题,防抖动机制,就能很好的解决,这方面最早的应用实践还是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. yolo+keras+tensorflow出错:No module named 'leaky_relu'+

    结论:keras2.1.5+tensorflow1.6.0即可. 首先出现的是:No module named 'leaky_relu',此时把keras改成2.1.5照样出错,改成keras2.1. ...

  2. Mysql之DQL------基础查询

    #笔记内容来自于B站尚硅谷教学视频(av49181542)use myemployees; 查询表中的单个字段 SELECT last_name FROM employees; 查询表中的多个字段 # ...

  3. <每日一题>算法题:小球的下落距离

    题目:小东和三个朋友一起在楼上抛小球,他们站在楼房的不同层,假设小东站的楼层距离地面N米,球从他手里自由落下,每次落地后反跳回上次下落高度的一半,并以此类推知道全部落到地面不跳,求4个小球一共经过了多 ...

  4. JVM实战

    一.内存溢出 虚拟机栈和本地方法栈溢出:-Xss256k package com.jedis; import java.util.LinkedList; import java.util.List; ...

  5. java_IO流(输入流)

    * 字节输入流(InputStream):所有字节输入流的父类 * 所有子类共性方法: * int read():从输入流中读取数据的下一个字节 * int read(byte[] b):从输入流中拂 ...

  6. input 不显示输入的历史记录

    第一次在 input 输入后,下次就会自动显示输入历史记录,去掉这种默认效果的解决方案 <input name="username" type="text" ...

  7. Linux 下 Nand Flash 驱动主要数据结构说明

    s3c2410 专有数据结构 s3c2410_nand_set struct s3c2410_nand_set { int                    nr_chips;     /* 芯片 ...

  8. Python全栈开发:线程代码实例

    #进程与线程的关系 """ 多进程(主进程,子进程): 优点:能同时利用多个CPU,进行多个操作,提高效率. 缺点:耗费内存资源(进程要开辟内存空间),进程不是越多越好, ...

  9. php访问其他网站接口

    使用函数:  file_get_contents($url); 传入接口url及其参数:如 $url="http://192.168.1.1/test.jsp?id=1&type=2 ...

  10. Redis相关语法

    设置用户密码 config set requirepass yourPassword