没有错误和没有明显错误的差别

本文通过一段Js代码，锚点绝对位置问题来剖析编码过程中，没有错误和没有明显错误的心理变化。

先来一句经典语录

世界上最遥远的距离不是生和死，而是你亲手制造的Bug就在你的眼前，你却怎么都找不到它。

没有错误

作为写代码的人常说，我写的代码没有问题。同产品经理、测试工程师较量时，信誓旦旦说没有错误，那就肯定有错误的。一般情况都是等他们一转身，自己偷偷把错误给改了。这种问题一般比较好避免，写代码的仔细用心一般问题不大。

没有明显错误

作为管理层和代码审计(测试)常说，代码看起没多大问题，但可能存在深层次的未知问题。一般情况下在测试过程中代码覆盖率和测试环境不同导致没法测全代码中的问题，这种问题很难避免，随着编程年龄的增加这种问题会略微减少。

锚点绝对位置

功能描述：点击按钮a，页面滚动到元素b。js代码如下：

 $('.f4-detail').on('click touch', function(){
    scroll($(".Q_gui").offset().top-10,800);
});

//滚动回调函数
var scroll = function(endY, duration) {
    endY = endY || ($.os.android ? 1 : 0);
    duration = duration || 200;
    var startY = document.body.scrollTop,
            startT  = +(new Date()),
            finishT = startT + duration;
    var interpolate = function (source, target, shift) {
        return (source + (target - source) * shift);
    };
    var easing = function (pos) {
        return (-Math.cos(pos * Math.PI) / 2) + .5;
    };
    var animate = function() {
        var now = +(new Date()),
                shift = (now > finishT) ? 1 : (now - startT) / duration;
        window.scrollTo(0, interpolate(startY, endY, easing(shift)));
        (now > finishT) || setTimeout(animate, 15);
    };
    animate();
};

这段代码看起没什么问题，点击后页面滚动到指定位置。

事实上忽略页面中，图片大多数是使用lazyload,页面中的图片加载后大量元素高度变化，导致页面会重绘。

初始状态距离顶部的值

$(".Q_gui").offset().top //初始高度：3936.625

滚动页面后，大量图片加载后块级元素的高度增加了。

$(".Q_gui").offset().top  //元素之前元素加载后高度：5970.625

通常一些微乎其微的问题直接导致你的功能不可用。测试就显得很重要。

改后的代码为：

 $('.f4-detail').on('click touch', function(){
    scroll($(".Q_gui"), 800);
});


//滚动回调函数
var scroll = function(obj, duration) {//传入对象
    duration = duration || 200;
    var startY = $('body').scrollTop(),
            startT  = +(new Date()),
            finishT = startT + duration;
    var interpolate = function (source, target, shift) {
        //动态获取目标位置的高度
        var target= target.offset().top;
        return (source + (target - source) * shift);
    };
    var easing = function (pos) {
        return (-Math.cos(pos * Math.PI) / 2) + .5;
    };
    var animate = function() {
        var now = +(new Date()),
                shift = (now > finishT) ? 1 : (now - startT) / duration;
        window.scrollTo(0, interpolate(startY, obj, easing(shift)));
        (now > finishT) || setTimeout(animate, 15);
    };
    animate();
};