jQuery window.on 调整大小没有在正确的时间触发答案

【问题标题】：jQuery window.on resize not firing at the right timejQuery window.on 调整大小没有在正确的时间触发
【发布时间】：2017-02-16 14:04:28
【问题描述】：

$myWindow.on('resize', function(){
var $width = $myWindow.width();
if ($width > 870) {
  console.log('hey im 870');
  $('#the-team-wrapper .flex-content').empty();
  ajax_results.done(function(data) {
          // console.log(data.job_titles[3]);

          var employee_job_titles;


          function job_titles_display(jobtitle,ind){
            if (jobtitle.job_titles[ind].length>1) {
              var my_array = [];
              for (var i = 0; i < jobtitle.job_titles[ind].length; i++){
                my_array.push(jobtitle.job_titles[ind][i][0]['title']);
                employee_job_titles = my_array.join(' | ');
              }
            }else {
              var employee_job_titles;
              employee_job_titles = jobtitle.job_titles[ind][0]['title'];
            }
            return employee_job_titles;
          }


          for (var i = 0; i < data.employee_info.length; i++) {
            if(i%2 == 0){
              $('#the-team-wrapper .flex-content').append('<div class="profile-parent"><div class="employee-profile-pic flex-item" data-id="'+data.employee_info[i]['id']+'"></div><div class="employee-bio-wrapper flex-item"><h2 data-id="'+data.employee_info[i]['id']+'">'+data.employee_info[i]['firstname']+" "+data.employee_info[i]['lastname']+'</h2><h3 data-id="'+data.employee_info[i]['id']+'">'+job_titles_display(data,i)+
              '</h3><p class="employee-bio-text employee-bio-text-not-active">'+data.employee_info[i]['bio']+'</p></div><button type="button" class="bio-prev-butt-left">View '+data.employee_info[i]['firstname']+'\'s'+' Bio</button><div class="hide-bio-close-button-left">x</div></div>');
            }else {
              $('#the-team-wrapper .flex-content').append('<div class="profile-parent"><div class="employee-bio-wrapper flex-item"><h2 data-id="'+data.employee_info[i]['id']+'">'+data.employee_info[i]['firstname']+" "+data.employee_info[i]['lastname']+'</h2><h3 data-id="'+data.employee_info[i]['id']+'">'+job_titles_display(data,i)+'</h3 data-id="'+data.employee_info[i]['id']+
              '"><p class="employee-bio-text employee-bio-text-not-active">'+data.employee_info[i]['bio']+'</p></div><div class="employee-profile-pic flex-item" data-id="'+data.employee_info[i]['id']+'"></div><button type="button" class="bio-prev-butt-right">View '+data.employee_info[i]['firstname']+'\'s'+' Bio</button><div class="hide-bio-close-button-right">x</div></div>');
            }

            var profile_pic_path = data.employee_info[i]['profile_pic'].split('\\').join('\\\\');
            $("#the-team-wrapper .flex-content-wrapper .flex-content .employee-profile-pic:eq("+i+")").css({'background': 'url(_employee_pics/'+profile_pic_path+')','background-repeat': 'no-repeat','background-position': 'center', 'background-size': 'cover'});
          }

        });

}

我有这段代码，它应该在宽度大于 870 时触发，但在 Opera 上宽度大于 970 时触发，而在 Chrome 上宽度约为 890 时触发。如何解决此问题并在浏览器中获得一致的结果。提前致谢。

【问题讨论】：

我通过 Opera 的 JS 控制台在此页面上测试了这个 $(window).on('resize', function(){ if ($(window).width() > 870.00) { console.log("current width: "+ $(window).width()) } });，它在窗口宽度为 870 像素后运行良好。 Opera 版本：40.0.2308.81； SO正在使用JQuery 1.12.4；会不会是版本问题？
据我所知，Chrome 53.0.2785.143 也没有问题。
Taile，你确定这不是像@Robusto 回答的那样快速左右“摆动”鼠标的问题吗？确实，我可以通过快速调整窗口大小使函数在不同的窗口宽度下执行。跳跃就像这样current width: 908 / current width: 1016

标签： javascript jquery html events event-handling

【解决方案1】：

问题是，resize 事件的触发时间和速率取决于浏览器、CPU 负载以及实际调整大小的速度。

在您的浏览器中测试以下代码。当我在干净的浏览器中以合理的覆盖率执行此操作时，差异通常在目标的 2px 左右。

(顺便说一句，你会看到我正在将 jQuery 选择器缓存到变量中。对于这个测试并不是绝对必要的，但你可能会惊讶地发现我已经修复了多少错误，因为编码人员已经调用了未缓存的 jQuery 选择器 willy- nilly 在循环和其他代码中重复的地方）。

var $window = $(window);
$window.on('resize',function(){
  var w = $window.width();
  if (w > 1000) {
    console.log( w );
  } else {
    console.log('nope: ' + w)
  }
});

【讨论】：

我已经更新了问题以准确显示我在调整大小时所做的事情我尝试了你的答案，但我仍然没有运气

【解决方案2】：

您是否使用 CSS 重置来中和浏览器在 <body> 元素上的默认 margin 或 padding？

不同的浏览器在页面的<body>中添加不同数量的padding或margin，这可以解释为什么该函数在不同浏览器的不同点触发。

【讨论】：

body 默认填充或边距永远不会是 20 像素，更不用说 100 像素了。
@danwellman 我已经重置了 html 和 body 标签，将填充边距和边框设置为 0，但同样的问题