JavaScript异步编程

1.前言

平时开发经常会用到js异步编程，由于前端展示页面都是基于网络机顶盒（IPTV的一般性能不太好，OTT较好），目前公司主要采取的异步编程的方式有setTimeout、setInterval、requestAnimationFrame、ajax，为什么会用到异步呢，就拿业务来说，若前端全部采取同步的方式，那加载图片、生成dom、网络数据请求都会大大增加页面渲染时长。

more >>

展开全文 >>

JavaScript防抖节流函数

1.直接上码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>debounce-throttle</title>
    <script type="text/javascript">
        
        //节流函数：时间戳节流，规定时间内一定执行一次
        function throttle(fn, delay){
            var prev = Date.now();
            return () => {
                var context = this,args = arguments;
                var now = Date.now();
                if(now - prev >= delay){
                    fn.apply(context, args);
                    prev = Date.now();
                }
            };
        }
        //节流函数：定时器节流，规定时间内一定执行一次
        function _throttle(fn, delay){
            var timer;
            return () => {
                var context = this,args = arguments;
                if(!timer){
                    timer = setTimeout(function(){
                        fn.apply(context, args);
                        timer=null;
                    },delay);
                }
            };
        }
        //事件触发时立即执行，触发完毕还能执行一次的节流函数：
        function __throttle(fn, delay){
            var timer,prev = Date.now();
            return () => {
                var context = this,args = arguments;
                var now = Date.now();
                clearTimeout(timer);
                if(delay - (now - prev) <= 0){
                    fn.apply(context, args);
                    prev = Date.now();
                }else{
                    timer = setTimeout(function(){
                        fn.apply(context, args);
                    },delay);
                }
            };
        }
        //防抖函数：规定一定时间后只执行一次fn
        function debounce(fn, delay){
            var timer;
            return () => {
                var context = this,args = arguments;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn.apply(context, args);
                },delay);
            };
        }
        //防抖函数：立即执行然后一定时间后只执行一次fn
        function _debounce(fn, delay, flag){
            var timer;
            return () => {
                var context = this,args = arguments;
                clearTimeout(timer);
                if(flag){
                    var now = !timer;
                    timer = setTimeout(function(){
                        timer = null;
                    },delay);
                    if(now){
                        fn.apply(context, args);    
                    }
                }else{
                    timer = setTimeout(function(){
                        fn.apply(context, args);
                    },delay);
                }
            };
        }
        function printLog(){
            var date = new Date();
            var second = date.getSeconds(),milliseconds=date.getMilliseconds();
            console.log('printLog:'+second+' ' +milliseconds);
        }
        window.onload = function(){
            document.getElementById('div').addEventListener('click', throttle(printLog,1000));
        }

    </script>
</head>
<body>
    <div id="div" style="width:200px;height:160px;background-color: yellow;"></div>
</body>
</html>
more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

多看多思少搬砖