节流事件

rickchen 发布于2019-08-20 12:07 / 2922人阅读

摘要：有一些事件是会频繁触发的，比如如果在这些事件上绑定函数，并且这些函数要进行耗性能的计算，那么会导致页面忽急忽缓，反应迟钝这时就需要使用节流事件来控制函数被触发的频率。

有一些事件是会频繁触发的，比如scroll resize mousemove keyup
如果在这些事件上绑定函数，并且这些函数要进行耗性能的计算，那么会导致页面忽急忽缓，反应迟钝,这时就需要使用节流事件来控制函数被触发的频率。

function handler() {
    // 处理一些耗性能的计算
    // 或者发送ajax请求

    console.log("2333");
}

$(window).scroll(handler); // 反复触发handler，影响性能

方法一 setTimeout

var timer = 0;

$(window).scroll(function() {
    if (!timer) {
        timer = setTimeout(function() {
            handler();
            timer = 0;
        }, 1000);
    }
});

方法二 setInterval

// scroll虽然绑定了一个会频繁触发的函数，但是该函数只是改变scrolled的值，不会影响性能

var scrolled = false;

$(window).on("scroll", function() {
    scrolled = true;
});

setInterval(function() {
    if (scrolled) {
        handler();
        scrolled = false;
    }
}, 1000);

想象一个场景：实时搜索

在输入框输入关键词后就要马上显示结果，通常做法是在keyup上绑定handler处理函数，发送ajax请求。但是如果用户输入速度很快，那么keyup会触发多次，发送多个ajax请求，而我们只是想要在用户停止输入的时间超过1s后才发送ajax

这和前面的scroll事件又有些不同，在这里我只想handler函数在keyup触发后执行一次
前面两种方法只是减少了handler()触发的频率，但是仍然会触发多次

方法三 clearTimeout

var searchTimeout = null;
$("#input").on("keyup", function(event) {
    //每次keyup时直接取消上次计时器，只有当keyup超过1s时才执行handler
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        handler();
    }, 1000);
});

参考：《jQuery基础教程》

云服务器 GPU云服务器函数节流节流保存字节流节流阀

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80808.html

前端优化 —— 函数的节流和防抖

摘要：文件为函数要传入的参数返回事件处理函数添加事件监听节流函数一般用于事件的情况较多，因为这些事件的触发是连续性的，需要在一个时间间隔内只触发一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 阅读原文前言在前端开发当中我们经常会绑定一些事件触发的某些程序执行，有时这些事件会连续触发，如浏览器窗口 s...

ralap 2019-08-23 12:18 评论0 收藏0
js 防抖节流 JavaScript

摘要：此时需要采用防抖和节流的方式来减少调用频率，同时不影响原来效果。函数防抖当持续触发事件时，一段时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前就触发了事件，延时重新开始。 js 防抖节流 JavaScript 实际工作中，通过监听某些事件，如scroll事件检测滚动位置，根据滚动位置显示返回顶部按钮；如resize事件，对某些自适应页面调整DOM的渲染；如ke...

int64 2019-08-23 14:48 评论0 收藏0
详谈js防抖和节流

摘要：本文会分别介绍什么是防抖和节流，它们的应用场景，和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。本文由小芭乐发表 0. 引入首先举一个例子：模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码：没有防抖 ...

shevy 2019-08-23 13:54 评论0 收藏0
JS专题之节流函数

摘要：一什么是节流节流函数就是让事件处理函数在大于等于执行周期时才能执行，周期之内不执行，即事件一直被触发，那么事件将会按每小段固定时间一次的频率执行。我们通过一个简单的示意来理解节流函数可以用时间戳和定时器两种方式进行处理。本文共 2000 字，读完只需 8 分钟上一篇文章讲了去抖函数，然后这一篇讲同样为了优化性能，降低事件处理频率的节流函数。一、什么是节流？节流函数（thrott...

huaixiaoz 2019-08-23 14:01 评论0 收藏0
JS函数节流和函数防抖

摘要：为什么需要函数防抖和函数节流在浏览器中某些计算和处理要比其他的昂贵很多。函数防抖如果一个事件被频繁触发多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。 1.为什么需要函数防抖和函数节流？在浏览器中某些计算和处理要比其他的昂贵很多。例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间。连续尝试进行...

doodlewind 2019-08-23 13:48 评论0 收藏0
防抖（debounce）和节流（throttle）---解决事件频繁触发造成页面卡死

摘要：防抖和节流连续触发触发频率很高的时间，不进行优化，会出现页面卡顿现象。节流防抖是多次触发事件，目标函数只执行一次，不管触发这些事件用了多少时间。防抖（debounce）和节流（throttle）连续触发（触发频率很高）的时间，不进行优化，会出现页面卡顿现象。常见的需要优化的事件：鼠标事件: mousemove（拖拽） mouseover(划过) mouseWheel(滚屏)...

IamDLY 2019-08-02 15:21 评论0 收藏0