javascript - 循环体中,dom 渲染问题
ringa_lee
ringa_lee 2017-04-11 11:17:40
0
1
204
html 块
<p data-start="0" data-end="1999" class=".price">0</p>

var throttle = function (fn, delay) {
        var timer = null;
        var t_start;
        return function () {
            var context = this, args = arguments, t_curr = +new Date();
            clearTimeout(timer);
            if (!t_start) {
                t_start = t_curr;
            }
            if (t_curr - t_start >= 166) {
                fn.apply(context, args);
                t_start = t_curr;
            } else {
                timer = setTimeout(function () {
                    fn.apply(context, args);
                }, delay);
            }
        };
    }
function jump(elem) {
                var startNum = $(elem).data("start")
                    ,endNum = $(elem).data("end");
                for (; startNum < endNum; startNum++) {
                    requestAnimationFrame((function(startNum){
                        return throttle(function(){
                            elem.innerText = startNum;
                        },66)
                    })(startNum))
                }
        }

jump(document.querySelector('.price'));

requestAnimationFrame 中 callback 改写为

        requestAnimationFrame((function (startNum) {
            return function () {
                console.log(startNum);
                elem.innerText = startNum;
            }
        })(startNum))

不能动态修改视图数据,但是startNum 是一直自增的, 为什么需要 函数节流?

ringa_lee
ringa_lee

ringa_lee

모든 응답(1)
左手右手慢动作
timer = setTimeout(function () {
    fn.apply(context, args);
}, delay);

函数节流2个目的:

  • 让一个函数只有在你不断触发后停下来歇会才开始执行,中间你操作得太快它直接无视你。

  • 让一个函数不要执行得太频繁,减少一些过快的调用来节流。

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿