首页 > web前端 > js教程 > javascript函数节流和防抖的应用场景介绍

javascript函数节流和防抖的应用场景介绍

不言
发布: 2018-10-19 15:06:33
转载
2667 人浏览过

本篇文章给大家带来的内容是关于php变量作用域的用法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

throttle 节流

事件触发到结束后只执行一次。

应用场景

触发mousemove事件的时候, 如鼠标移动。

触发keyup事件的情况, 如搜索。

触发scroll事件的时候, 譬如鼠标向下滚动停止时触发加载数据。

coding

方法1  防抖

// function resizehandler(fn, delay){
//   clearTimeout(fn.timer);
//   fn.timer = setTimeout(() => {
//      fn();
//   }, delay);
// }
// window.onresize = () => resizehandler(fn, 1000);
登录后复制

方法2 闭包  防抖

function resizehandler(fn, delay){
    let timer = null;
    return function() {
      const context = this;
      const args=arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
         fn.apply(context,args);
      }, delay);
    }
 }
 window.onresize = resizehandler(fn, 1000);
登录后复制

debounce 防抖

事件出发后一定的事件内执行一次。

应用场景

window 变化触发resize事件是, 只执行一次。

电话号码输入的验证, 只需停止输入后进行一次。

coding

function resizehandler(fn, delay, duration) {
        let timer = null;
        let beginTime = +new Date();
        return function() {
          const context = this;
          const args = arguments;
          const currentTime = +new Date();
          timer && clearTimeout(timer);
          if ((currentTime - beginTime) >= duration) {
            fn.call(context, args);
            beginTime = currentTime;
           } else {
             timer = setTimeout(() => {
               fn.call(context, args)
             }, delay);
           }
        }
      }

        window.onresize = resizehandler(fn, 1000, 1000);
登录后复制

以上是javascript函数节流和防抖的应用场景介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:segmentfault.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板