5.14 Uncaught (in promise) TypeError: undefined，betterScroll的maxScrollY，搜索上拉刷新效果思路，节流函数，元素插入首部

1、上午碰到一个Uncaught (in promise) TypeError: src undefined的问题，纠结了好久。
思路：认为是promise应答失败，结果设置catch捕获异常。提示信息 依旧是 src undefined，经过30分钟，log的地毯式查询。
原因：发现是ret数组的初始化建立失败，ret数组是根据list数组创建的，当我在forEach循环list数组时，我加入了if判断导致ret数组的索引与list不一致，所以导致一系列undefined。
解决办法：

_normalizeSongs (list) {
      let ret = []
      // list的长度是后台返回来的20，但是ret[index]和list[index]是不匹配的，所以不能用ret[index]去定位url，应该先让两者统一。先将list filter 再进行操作。
      list = list.filter(item => item.songid && item.albumid)
      list.forEach((item, index) => {
        ret.push(createTopSong(item))
        getSongUrl(item.songmid).then(res => {
          if (res.code === ERR_OK) {
            ret[index].url = res.url
          }
        })
      })
      return ret
    }

2、better-scroll的maxScrollY属性 并不是列表的offsetHeight，而是整体list高度减去当前显示区域，即scroll还能滑动的偏移。还有this.scroll.y表示当前滑动偏移。

3、搜索歌曲上拉动态载入。
效果：

思路：
0、search()接口获得数据，设立hasMore标志位true。
1、scroll组件监听scrollEnd事件，并判断scroll是否滑至底部
2、滑至底部，向父组件派发this.$emit.scrollToEnd事件
3、父组件接收到，并调用一次searchMore方法
4、searchMore方法执行，判断hasMore若为true则继续执行，search().then(data)获取接口数据
5、对数据进行分析后调用checkMore()，比对totalnum和当前num，若num大于等于totalnum则标志位hasMore至false，之后的滑动底部searchMore方法将不会执行。直到输入框v-model更新。开始第0步操作。

注：下拉刷新一样，比上拉简单些。

4、节流函数（高阶函数，细品）

 created () {
    this.$watch('query', debounce((newQuery) => {
      this.$emit('query', newQuery)
    }, 200))
  },
  
// 公共组件文件

// 节流函数
export function debounce(func, delay) {
  let timer

  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

2019年10月16日14:17:14补充节流函数
节流函数较高阶，其中涉及到函数执行顺序的问题，
1、此处函数是自左向右执行，
2、先return 一个匿名函数，
3、之后将最右边的 参数传给匿名函数，
4、最后在匿名函数中，以args和apply的方式去执行。

5、对数组加入固定长度的元素，且最新插入位于首部的方法

function insertArray(arr, val, compare, maxLen) {
  const index = arr.findIndex(compare)
  // 如果值存在，且位于第一条
  if (index === 0) {
    return 
  }
  // 如果值存在，但不位于第一条,得先移除
  if (index > 0) {
    arr.splice(index, 1)
  }
  // 插入首部
  arr.unshift(val)
  // 判断是否超最大长度
  if (maxLen && arr.length > maxLen) {
    // 将数组最后一个元素pop出去
    arr.pop()
  }
}