Javascript-函數(shù)節(jié)流與函數(shù)防抖

ivan_qhz 發(fā)布于2019-08-23 12:10 / 1333人閱讀

摘要：函數(shù)節(jié)流名詞解釋函數(shù)節(jié)流連續(xù)執(zhí)行函數(shù)，每隔一定時(shí)間執(zhí)行函數(shù)使用場(chǎng)景鼠標(biāo)移動(dòng)，事件元素動(dòng)態(tài)定位，對(duì)象的和事件等等函數(shù)節(jié)流簡(jiǎn)單實(shí)現(xiàn)上次執(zhí)行的時(shí)間定時(shí)器默認(rèn)間隔為現(xiàn)在的時(shí)間當(dāng)前距離上次執(zhí)行的時(shí)間小于設(shè)置的時(shí)間間隔清除定時(shí)器時(shí)間后，執(zhí)行函數(shù)當(dāng)前距離

函數(shù)節(jié)流（throttle） 名詞解釋

函數(shù)節(jié)流（throttle）：連續(xù)執(zhí)行函數(shù)，每隔一定時(shí)間執(zhí)行函數(shù)

使用場(chǎng)景

鼠標(biāo)移動(dòng)，mousemove 事件
DOM 元素動(dòng)態(tài)定位，window對(duì)象的resize和scroll 事件
等等...

函數(shù)節(jié)流（throttle）簡(jiǎn)單實(shí)現(xiàn)

    function throttle(fn, delay) {
        var last; // 上次執(zhí)行的時(shí)間
        var timer; // 定時(shí)器
        delay || (delay = 250); // 默認(rèn)間隔為250ms
        return function() {
            var context = this;
            var args = arguments;
            var now = +new Date(); // 現(xiàn)在的時(shí)間
            if (last && now < last + delay) { // 當(dāng)前距離上次執(zhí)行的時(shí)間小于設(shè)置的時(shí)間間隔
                clearTimeout(timer); // 清除定時(shí)器
                timer = setTimeout(function() { // delay時(shí)間后，執(zhí)行函數(shù)
                    last = now;
                    fn.apply(context, args);
                }, delay);
            } else { // 當(dāng)前距離上次執(zhí)行的時(shí)間大于等于設(shè)置的時(shí)間，直接執(zhí)行函數(shù)
                last = now;
                fn.apply(context, args);
            }
        };
    }

函數(shù)防抖（debounce） 名詞解釋

函數(shù)防抖（debounce）：空閑時(shí)間必須大于或等于一定值的時(shí)候，才會(huì)執(zhí)行調(diào)用方法

使用場(chǎng)景

文本輸入keydown 事件
等等...

函數(shù)防抖（debounce）簡(jiǎn)單實(shí)現(xiàn)

    function debounce(fn, delay) {
        var timer; // 定時(shí)器
        delay || (delay = 250); // 默認(rèn)空閑時(shí)間250ms
        return function() {
            var context = this;
            var args = arguments;
            clearTimeout(timer); // 清除定時(shí)器
            timer = setTimeout(function() { // delay時(shí)間后，執(zhí)行函數(shù)
                fn.apply(context, args);
            }, delay);
        };
    }

GPU云服務(wù)器云服務(wù)器 VUE防抖與節(jié)流函數(shù)節(jié)流 js函數(shù)節(jié)流 javascript 函數(shù)

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

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

相關(guān)文章

說(shuō)說(shuō)JavaScript中函數(shù)的防抖 (Debounce) 與節(jié)流 (Throttle)

摘要：基礎(chǔ)防抖我們現(xiàn)在寫一個(gè)最基礎(chǔ)的防抖處理標(biāo)記事件也做如下改寫現(xiàn)在試一下，我們會(huì)發(fā)現(xiàn)只有我們停止?jié)L動(dòng)秒鐘的時(shí)候，控制臺(tái)才會(huì)打印出一行隨機(jī)數(shù)。為何要防抖和節(jié)流有時(shí)候會(huì)在項(xiàng)目開發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實(shí)時(shí)搜索功能，我們知道如果事件處理函數(shù)無(wú)限制調(diào)用，會(huì)大大加重瀏覽器的工作量，有可能導(dǎo)致頁(yè)面卡頓影響體驗(yàn)；后臺(tái)...

yanwei 2019-08-23 18:10 評(píng)論0 收藏0
JavaScript：函數(shù)防抖與函數(shù)節(jié)流

摘要：函數(shù)防抖簡(jiǎn)單實(shí)現(xiàn)模擬請(qǐng)求獲取函數(shù)的作用域和變量清除定時(shí)器節(jié)流名詞解釋連續(xù)執(zhí)行函數(shù)，每隔一定時(shí)間執(zhí)行函數(shù)。效果函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次函數(shù)節(jié)流是間隔時(shí)間執(zhí)行，不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。防抖（debounce）名詞解釋：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。使用場(chǎng)景：以百度輸入框例，比如你要查詢...

elina 2019-08-23 15:26 評(píng)論0 收藏0
JavaScript之節(jié)流與防抖

摘要：個(gè)人博客原文地址背景我們?cè)陂_發(fā)的過(guò)程中會(huì)經(jīng)常使用如等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時(shí)間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。個(gè)人博客原文地址背景我們?cè)陂_發(fā)的過(guò)程中會(huì)經(jīng)常使用如scroll、resize、touchmove等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時(shí)間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。因此針對(duì)這類事件要進(jìn)行節(jié)流或者防抖處理節(jié)流節(jié)流的意思...

wayneli 2019-08-23 10:33 評(píng)論0 收藏0
JavaScript防抖和節(jié)流

摘要：概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。防抖任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過(guò)指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。節(jié)流指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任務(wù)一定時(shí)間內(nèi)方法只跑一次。概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。防抖：任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過(guò)指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。節(jié)流：指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任...

DevWiki 2019-08-23 17:09 評(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