防抖,节流函数

1:防抖函数

    主要是,当连续触发函数时,上一次的函数不会执行,利用setTimeout定时器来处理

    // 防抖,就是连续触发,只触发最后一次

        function debunce(fn, delay) {

            var timer;

            return function() {

                // 每次进来,清除一次定时器

                clearTimeout(timer);

                timer = setTimeout(fn, delay);

            }

        }


2:节流函数


        // 节流,就是连续触发时,只定时执行

        function thread(fn, delay) {

            var timer;

            return function() {

                // 如果存在timer则不做任何处理

                if (timer) {

                    return

                } else {

                    timer  = setTimeout(function(){

                        fn()

                        timer = null;

                    }, delay);

                }

            }

        }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数节流场景 例如:实现一个原生的拖拽功能(如果不用H5 Drag和Drop API),我们就需要一路监听mous...
    凡凡的小web阅读 815评论 0 0
  • 长久以来,面向对象在 JavaScript 编程范式中占据着主导地位。不过,最近人们对函数式编程的兴趣正在增长。函...
    神刀阅读 487评论 0 0
  • 一、问题 如何解决用户频繁操作所带来的性能问题? 二、场景 简书中的Markdown预览功能,希望用户停止输入0....
    Eric_lwh阅读 389评论 0 0
  • 读《思维导图使用手册》 从高中时开始接触学习方法和记忆方法,思维导图也早就了解,并买了成套的书,但因为早已过...
    飘扬的雨阅读 274评论 0 0
  • 今天不知怎的,情绪忽然变得有点低落,伴随着一点烦躁,觉察了一下,可能是今天发生的一些事又把内心深处的一些心理垃圾勾...
    9135aa6a2ebe阅读 330评论 0 0