節(jié)流事件

rickchen 發(fā)布于2019-08-20 12:07 / 2968人閱讀

摘要：有一些事件是會(huì)頻繁觸發(fā)的，比如如果在這些事件上綁定函數(shù)，并且這些函數(shù)要進(jìn)行耗性能的計(jì)算，那么會(huì)導(dǎo)致頁(yè)面忽急忽緩，反應(yīng)遲鈍這時(shí)就需要使用節(jié)流事件來(lái)控制函數(shù)被觸發(fā)的頻率。

有一些事件是會(huì)頻繁觸發(fā)的，比如scroll resize mousemove keyup
如果在這些事件上綁定函數(shù)，并且這些函數(shù)要進(jìn)行耗性能的計(jì)算，那么會(huì)導(dǎo)致頁(yè)面忽急忽緩，反應(yīng)遲鈍,這時(shí)就需要使用節(jié)流事件來(lái)控制函數(shù)被觸發(fā)的頻率。

function handler() {
    // 處理一些耗性能的計(jì)算
    // 或者發(fā)送ajax請(qǐng)求

    console.log("2333");
}

$(window).scroll(handler); // 反復(fù)觸發(fā)handler，影響性能

方法一 setTimeout

var timer = 0;

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

方法二 setInterval

// scroll雖然綁定了一個(gè)會(huì)頻繁觸發(fā)的函數(shù)，但是該函數(shù)只是改變scrolled的值，不會(huì)影響性能

var scrolled = false;

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

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

想象一個(gè)場(chǎng)景：實(shí)時(shí)搜索

在輸入框輸入關(guān)鍵詞后就要馬上顯示結(jié)果，通常做法是在keyup上綁定handler處理函數(shù)，發(fā)送ajax請(qǐng)求。但是如果用戶輸入速度很快，那么keyup會(huì)觸發(fā)多次，發(fā)送多個(gè)ajax請(qǐng)求，而我們只是想要在用戶停止輸入的時(shí)間超過(guò)1s后才發(fā)送ajax

這和前面的scroll事件又有些不同，在這里我只想handler函數(shù)在keyup觸發(fā)后執(zhí)行一次
前面兩種方法只是減少了handler()觸發(fā)的頻率，但是仍然會(huì)觸發(fā)多次

方法三 clearTimeout

var searchTimeout = null;
$("#input").on("keyup", function(event) {
    //每次keyup時(shí)直接取消上次計(jì)時(shí)器，只有當(dāng)keyup超過(guò)1s時(shí)才執(zhí)行handler
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        handler();
    }, 1000);
});

參考：《jQuery基礎(chǔ)教程》

云服務(wù)器 GPU云服務(wù)器函數(shù)節(jié)流節(jié)流保存字節(jié)流節(jié)流閥

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80808.html

相關(guān)文章

前端優(yōu)化 —— 函數(shù)的節(jié)流和防抖

摘要：文件為函數(shù)要傳入的參數(shù)返回事件處理函數(shù)添加事件監(jiān)聽節(jié)流函數(shù)一般用于事件的情況較多，因?yàn)檫@些事件的觸發(fā)是連續(xù)性的，需要在一個(gè)時(shí)間間隔內(nèi)只觸發(fā)一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 閱讀原文前言在前端開發(fā)當(dāng)中我們經(jīng)常會(huì)綁定一些事件觸發(fā)的某些程序執(zhí)行，有時(shí)這些事件會(huì)連續(xù)觸發(fā)，如瀏覽器窗口 s...

ralap 2019-08-23 12:18 評(píng)論0 收藏0
js 防抖 節(jié)流 JavaScript

摘要：此時(shí)需要采用防抖和節(jié)流的方式來(lái)減少調(diào)用頻率，同時(shí)不影響原來(lái)效果。函數(shù)防抖當(dāng)持續(xù)觸發(fā)事件時(shí)，一段時(shí)間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會(huì)執(zhí)行一次，如果設(shè)定的時(shí)間到來(lái)之前就觸發(fā)了事件，延時(shí)重新開始。 js 防抖節(jié)流 JavaScript 實(shí)際工作中，通過(guò)監(jiān)聽某些事件，如scroll事件檢測(cè)滾動(dòng)位置，根據(jù)滾動(dòng)位置顯示返回頂部按鈕；如resize事件，對(duì)某些自適應(yīng)頁(yè)面調(diào)整DOM的渲染；如ke...

int64 2019-08-23 14:48 評(píng)論0 收藏0
詳談js防抖和節(jié)流

摘要：本文會(huì)分別介紹什么是防抖和節(jié)流，它們的應(yīng)用場(chǎng)景，和實(shí)現(xiàn)方式。防抖和節(jié)流都是為了解決短時(shí)間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問題，比如觸發(fā)頻率過(guò)高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。本文由小芭樂發(fā)表 0. 引入首先舉一個(gè)例子：模擬在輸入框輸入后做ajax查詢請(qǐng)求，沒有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼：沒有防抖 ...

shevy 2019-08-23 13:54 評(píng)論0 收藏0
JS專題之節(jié)流函數(shù)

摘要：一什么是節(jié)流節(jié)流函數(shù)就是讓事件處理函數(shù)在大于等于執(zhí)行周期時(shí)才能執(zhí)行，周期之內(nèi)不執(zhí)行，即事件一直被觸發(fā)，那么事件將會(huì)按每小段固定時(shí)間一次的頻率執(zhí)行。我們通過(guò)一個(gè)簡(jiǎn)單的示意來(lái)理解節(jié)流函數(shù)可以用時(shí)間戳和定時(shí)器兩種方式進(jìn)行處理。本文共 2000 字，讀完只需 8 分鐘上一篇文章講了去抖函數(shù)，然后這一篇講同樣為了優(yōu)化性能，降低事件處理頻率的節(jié)流函數(shù)。一、什么是節(jié)流？節(jié)流函數(shù)（thrott...

huaixiaoz 2019-08-23 14:01 評(píng)論0 收藏0
JS函數(shù)節(jié)流和函數(shù)防抖

摘要：為什么需要函數(shù)防抖和函數(shù)節(jié)流在瀏覽器中某些計(jì)算和處理要比其他的昂貴很多。函數(shù)防抖如果一個(gè)事件被頻繁觸發(fā)多次，并且觸發(fā)的時(shí)間間隔過(guò)短，則防抖函數(shù)可以使得對(duì)應(yīng)的事件處理函數(shù)只執(zhí)行最后觸發(fā)的一次。函數(shù)防抖可以把多個(gè)順序的調(diào)用合并成一次。 1.為什么需要函數(shù)防抖和函數(shù)節(jié)流？在瀏覽器中某些計(jì)算和處理要比其他的昂貴很多。例如DOM操作比起非DOM交互需要更多的內(nèi)存和CPU占用時(shí)間。連續(xù)嘗試進(jìn)行...

doodlewind 2019-08-23 13:48 評(píng)論0 收藏0
防抖（debounce）和節(jié)流（throttle）---解決事件頻繁觸發(fā)造成頁(yè)面卡死

摘要：防抖和節(jié)流連續(xù)觸發(fā)觸發(fā)頻率很高的時(shí)間，不進(jìn)行優(yōu)化，會(huì)出現(xiàn)頁(yè)面卡頓現(xiàn)象。節(jié)流防抖是多次觸發(fā)事件，目標(biāo)函數(shù)只執(zhí)行一次，不管觸發(fā)這些事件用了多少時(shí)間。防抖（debounce）和節(jié)流（throttle）連續(xù)觸發(fā)（觸發(fā)頻率很高）的時(shí)間，不進(jìn)行優(yōu)化，會(huì)出現(xiàn)頁(yè)面卡頓現(xiàn)象。常見的需要優(yōu)化的事件：鼠標(biāo)事件: mousemove（拖拽） mouseover(劃過(guò)) mouseWheel(滾屏)...

IamDLY 2019-08-02 15:21 評(píng)論0 收藏0