jquery – ¿Como hacer que x funcion se aplique solo a un determinado ancho de pantalla con Javascript?

Bueno la razón de tu problema es por como estas haciendo con la acción de tu botón.
Dale un console.log(buton.click) y verás que cada vez que haces click en el botón estas aumentándole funciones y funciones a tu botón, ósea primera vez que ejecutas la acción del botón tienes digamos el if, luego si cambias el tamaño de la pantalla para ejecutar el else tu botón tiene ya dos funciones que va ejecutar primero el if y else, luego si vuelve a cambiar el tamaño de la pantalla verás 3 funciones en tu console.log del botón, y así sucesivamente, y todas las funciones se ejecutan al hacer click por eso tienes ese comportamiento.

¿Qué debes hacer? -Mover la función del click a otro lado o retirar las funciones del botón antes de añadirle una nueva función.

Yo he movido tú código del botón a otra función:

$(function(){
   const changeResizeDesktop = window.matchMedia('(min-width: 801px)');

   function changeStyles() {
      if (changeResizeDesktop.matches){
         $('body').removeAttr('style');
         $('.box1').fadeIn();
         /* Retiramos la función para declararla en otro lado
         $('button').on('click', function(){
            $('body').removeAttr('style');
            $('.box1').css('background','darkblue').slideUp(4000);
            $('body').css('background','#ededed');      
            console.log($('button').click);
         });
         */
      } else {
         $('.box1').add('body').removeAttr('style');
         $('.box1').slideDown();
         /* Retiramos la función para declararla en otro lado
         $('button').on('click', function(){
            $('body').removeAttr('style');
            $('.box1').fadeOut(4000);
            $('body').css('opacity','0.5');
            console.log($('button').click);
         });
         */
      }
   }
   
   // declaramos la función on click y verificamos el ancho de la patalla.
   $('button').on('click', function() {
      if (changeResizeDesktop.matches){
         $('body').removeAttr('style');
         $('.box1').css('background','darkblue').slideUp(4000);
         $('body').css('background','#ededed');
      } else {
         $('body').removeAttr('style');
         $('.box1').fadeOut(4000);
         $('body').css('opacity','0.5');
      }
   });

   changeStyles();
   window.addEventListener('resize', changeStyles);

});
body{
 margin: 0;
 padding: 0;
}
.box1{
 height: 200px;
 margin: 10px;
 width: 20%;
 background: darkred;
}
button{
 background: darkred;
 color: white;
 border-radius: 8px;
 line-height: 2;
 padding: 0 3%;
 margin: 10px;
 border: none;
}
button:hover{
 cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="box1"></div>
<button>Toca el boton</button>